jQuery幻灯片插件Orbit

拉丁传说 8月前 1054

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-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 官方地址:http://zurb.com/playground/orbit-jquery-image-slider

演 示 下 载

最新回复 (0)
返回
发新帖