[代码样式]jQuery幻灯片插件Orbit

脚本代码
20年10月27日
编辑

简介

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

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

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

兼容性

Orbit 不兼容 IE6。

使用方法

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

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/orbit-thumbs.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.orbit.min.js"></script>

2、HTML

<div id="featured">
    <img src="https://www.dowebok.com/images/img1.jpg" alt="img1">
    <img src="https://www.dowebok.com/images/img2.jpg" alt="img2">
    <img src="https://www.dowebok.com/images/img3.jpg" alt="img3">
    <img src="https://www.dowebok.com/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-push	fade
animationSpeed	幻灯片切换动画时间，单位为毫秒	800
timer	是否显示计时器	true
advanceSpeed	幻灯片切换间隔，单位为毫秒	4000
pauseOnHover	鼠标悬停在上面是否暂停	false
startClockOnMouseOut	点击导航后是否暂停计时器，直到鼠标移开	false
startClockOnMouseOutAfter	与 startClockOnMouseOut 配合使用，鼠标移开后多久开始计时，单位为毫秒	1000
directionalNav	是否显示左右方向导航	true
captions	是否显示标题	true
captionAnimation	标题显示动画方式，可选 fade（淡入淡出）、slideOpen、none，需要 captions 为 true	fade
captionAnimationSpeed	标题动画时间，单位为毫秒	800
bullets	是否显示项目导航	false
bulletThumbs	是否显示缩略图，需要 bullets 为 true	false
bulletThumbLocation	缩略图的文件地址	空
afterSlideChange	幻灯片切换后的回调函数	空