图上轮播

http://www.dowebok.com/demo/2013/58/index_3.html

简介

Orbit 是一个基于 jQuery 的幻灯片插件，它的功能虽然不如 FlexSlider 强大，但常见的功能都有，并且它还具有计时器这个特别的功能。Orbit 具有以下功能特点：

• 标签简单
• 支持淡入淡出和水平/垂直滚动切换
• 支持计时器
• 支持左右箭头导航及项目导航
• 支持显示初图片外的其他内容，如 HTML、视频等（演示）
• 支持缩略图（演示）

Orbit 已经停止更新了，因为它已经被作者集成到一个快速的前端框架中——Foundation，它最后一个版本是2012年1月25日发布的 v1.3.0。但它仍然是一个非常优秀的幻灯片插件，你可以继续使用。

兼容性

Orbit 不兼容 IE6。

使用方法

以下介绍的是基本用法，以便快速入门。想要高级用法，可以查看下面的参数和演示。

1、引入文件

<link rel="stylesheet" href="css/orbit-thumbs.css"><script src="js/jquery.min.js"></script><script src="js/jquery.orbit.min.js"></script>

2、HTML

<div id="featured">    <img src="images/img1.jpg" alt="img1">    <img src="images/img2.jpg" alt="img2">    <img src="images/img3.jpg" alt="img3">    <img src="images/img4.jpg" alt="img4"></div>

3、JavaScript

$(window).load(function() {    $('#featured').orbit();});

参数

以下参数基于 Orbit v1.3.0 版本。

参数说明默认值animation幻灯片切换方式，可选 fade（淡入淡出）、horizontal-slide, vertical-slide, horizontal-push、horizontal-pushfadeanimationSpeed幻灯片切换动画时间，单位为毫秒800timer是否显示计时器trueadvanceSpeed幻灯片切换间隔，单位为毫秒4000pauseOnHover鼠标悬停在上面是否暂停falsestartClockOnMouseOut点击导航后是否暂停计时器，直到鼠标移开falsestartClockOnMouseOutAfter与 startClockOnMouseOut 配合使用，鼠标移开后多久开始计时，单位为毫秒1000directionalNav是否显示左右方向导航truecaptions是否显示标题truecaptionAnimation标题显示动画方式，可选 fade（淡入淡出）、slideOpen、none，需要 captions 为 truefadecaptionAnimationSpeed标题动画时间，单位为毫秒800bullets是否显示项目导航falsebulletThumbs是否显示缩略图，需要 bullets 为 truefalsebulletThumbLocation缩略图的文件地址空afterSlideChange幻灯片切换后的回调函数空

Orbit 官方地址：http://zurb.com/playground/orbit-jquery-image-slider