幻灯片jQuery插件Orbit 介绍

JavaScript

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

Orbit 简介

幻灯片jQuery插件Orbit

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

插件官方主页：点击访问

演示页面：点击查看

使用方法：

1、加载CSS、js 文件的代码：

<link rel="stylesheet" href="orbit-1.2.3.css">

 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript" src="jquery.orbit-1.2.3.min.js"></script>

2、html部分：

<div id="featured"> 
 <div class="content" style="">
 <h1>Orbit does content now.</h1>
 <h3>Highlight me...I'm text.</h3>
 </div>
 <a href=""><img src="dummy-images/overflow.jpg" /></a>
 <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
 <img src="dummy-images/features.jpg" />
 </div>
 <!-- Captions for Orbit -->
 <span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>

摘自http://devework.com/jquery-plugin-orbit-slide.html