jQuery幻燈片插件Orbit

拉丁傳說 2018-4-13 1305

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)
返回
發新帖
下载麻将游戏四人麻将