jQuery幻灯片插件Orbit
简介
Orbit 是一个基于 jQuery 的幻灯片插件,它的功能虽然不如 FlexSlider 强大,但常见的功能都有,并且它还具有计时器这个特别的功能。Orbit 具有以下功能特点:
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-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 | 幻灯片切换后的回调函数 | 空 |
Orbit 官方地址:https://zurb.com/playground/orbit-jquery-image-slider