幻灯片jQuery插件Orbit 介绍（附添加到WordPress教程）

这年头，几乎常规的网站都有幻灯片；没有反而显得不高档了。今天介绍一个图片滑动幻灯片jQuery 插件，名字叫 Orbit，自定义功能很强大却是轻量级（仅仅4kb 左右）。接下来介绍一下并提供个添加到WordPress 主题的教程。

Orbit 简介

Orbit是一个设计良好并且容易使用的jQuery 图片滑动幻灯片插件，它除了支持图片滚动切换展示外，还支持针对内容的滚动。插件的定制性相当高，它提供了多个参数的设置，通过设置你可以将它打造成完全符合你要求的样式。 Orbit支持 IE7+, FF3.5+, Chrome、Safari 等浏览器，整个插件十分轻巧，仅仅4kb 左右，需要jQuery 1.5.1版本以上。

插件官方主页：点击访问 演示页面：点击查看

幻灯片jQuery插件Orbit 集成到WordPress 主题教程

看官方，Orbit最新的版本（1.3.0）貌似集成到某个框架去了，我们可以使用旧版本（1.2.3）。下载所需要的文件：官方下载百度网盘下载解压后，将这个文件夹重命名为orbit，放到WordPress 主题目录下（当然，你可以自定义路径，以下以此为准）。

一、确保你的WordPress 主题已经加载jQuery 库，注意是要1.5.1 版本以上的。

二、首先将下面的代码放到主题的header.php（具体哪里知道吧），这是加载CSS、js 文件的代码：

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/orbit/orbit-1.2.3.css"> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/orbit/jquery.orbit-1.2.3.min.js"></script> <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script>

三、HTML 部分。幻灯片一般都是在首页加载的，对于WordPress 主题，可以通过if 语气判断是否在首页来写入html。

<?php if ( is_home() ){ ?> <div id="featured"> <a href=”#”><img src="/1.jpg" /></a> <a href=”#”><img src="/2.jpg" /></a> <a href=”#”><img src="/3.jpg" /></a> <a href=”#”><img src="/4.jpg" /></a> </div> <?php } ?>

对于上面的代码，你需要做的很多。比如再添加一个幻灯片、比如链接的url、图片的路径等等，什么仅仅算是一个演示。

为了适合于你的主题，你可以通过orbit-1.2.3.css 修改相关代码自定义样式，比如宽高神马的。

而对于幻灯片的相关参数设置，你可以去查阅官方文档自行解决。

折腾这个需要你懂html、CSS，javascript 或者jquery 略懂一点就可以了，Jeff也是这样水平~jquery 插件就是方便，不一定要你看懂代码，会用就行。