[jQuery] jQuery Cycle 圖片輪播套件

jQuery提供了優良的動態效果支援，以往需要使用flash才能呈現的圖片輪播效果，現在用jQuery就可以達成了。
而且 jQuery Cycle 套件更讓我們省去撰寫jquery程式碼的麻煩，使用方法非常簡單...

參考 jQuery Cycle 官網的基本範例 Super Basic Demo
官方也有提供所有選項的文件
看不懂可以參考簡中版

註1：如果發現背景顏色無法更改，可以嘗試將cleartypeNoBg這個參數設成true。

使用

引入jquery.cycle.min.js文件：

<script type="text/javascript" src="jquery.cycle.min.js"></script>

以this为例，执行以下脚本：

$(this).cycle({ fx: 'shuffle', easing: 'backout', delay: -4000 });//示例参数，详细选项见下文

选项

cycle函数的参数是字符串类型，用于执行命令，可以为：

‘pause’：滑鼠移到上頭自動停止播放，可以用’resume’命令继续播放
‘resume’：继续播放
‘toggle’：暂停/继续开关，交换状态
‘next’：播放下一张幻灯片
‘prev’：播放上一张幻灯片
‘stop’：停止播放
‘destroy’：停止播放，并且取消所有事件绑定

同时还可以通过给cycle函数传入option对象、使用metadata、在自己的代码中重定义值这三种方法来重写默认参数。许多很酷的效果可以利用这些参数实现，但它们都不是必需的，因此只需重写你想要的。

// 重写这个全局变量（每个都是可选的）
 $.fn.cycle.defaults = {
   fx: 'fade', // 过渡效果的名字 (或者用逗号分开, 如: fade,scrollUp,shuffle)
   timeout: 4000, // 幻灯片过渡间隔，单位是毫秒 (若值为0则不自动切换)
   timeoutFn: null, // 每张幻灯片播放时间结束时的回调函数:
                    // function(currSlideElement, nextSlideElement, options, forwardFlag)
   continuous: 0, // 若为true，则当前幻灯片播放完后会直接播放下一张
   speed: 1000, // 过渡的速度
   speedIn: null, // 幻灯片开始时的过渡速度
   speedOut: null, // 幻灯片结束时的过渡速度
   next: null, // 下一张幻灯片的触发元素
   prev: null, // 上一张幻灯片的触发元素
   prevNextClick: null, // prev/next的单击回调函数:
                        // function(isNext, zeroBasedSlideIndex, slideElement)
   prevNextEvent: 'click.cycle',//用于手动驱动上/下一张过渡的事件
   pager: null, // 页面容器元素
   pagerClick: null, // 页面容器的单击回调函数:
                     // function(zeroBasedSlideIndex, slideElement)
   pagerEvent: 'click.cycle', // 驱动页面导航的事件
   allowPagerClickBubble: false, // 允许或阻止页面单击事件的向上传递
   pagerAnchorBuilder: null, // 用于建立超链接的回调函数:
                             // function(index, DOMelement)
   before: null, // 过渡回调函数 (scope为将要显示的元素):
                 // function(currSlideElement, nextSlideElement, options, forwardFlag)
   after: null, // 过渡回调函数 (scope为已经显示过的元素):
                // function(currSlideElement, nextSlideElement, options, forwardFlag)
   end: null, // 当幻灯片终止时的回调函数 (与'autostop'和'nowrap'选项联用):
              // function(options)
   easing: null, // 开始和结束过渡时的easing方法
   easeIn: null, // 开始过渡时的easing
   easeOut: null, // 结束过渡时的easing
   shuffle: null, // 对于shuffle动画的坐标, 比如: { top:15, left: 200 }
   animIn: null, // 幻灯片进入时的动画属性
   animOut: null, // 幻灯片结束时的动画属性
   cssBefore: null, // 幻灯片进入前的状态属性
   cssAfter: null, // 幻灯片结束后的状态属性
   fxFn: null, // 用于控制过渡的函数:
   // function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
   height: 'auto', // 容器高度
   startingSlide: 0, // 第一张要显示的幻灯片在数组中的索引（基于0）
   sync: 1, // 若为true则进入/结束的过渡效果同时发生
   random: 0, // 若为true则随机播放幻灯片，反之则按顺序播放 (对shuffle动画无效)
   fit: 0, // 强制幻灯片适应容器
   containerResize: 1, // 调整容器大小去适应最大的幻灯片
   pause: 0, // 若为true则启用"pause on hover"（鼠标滑过时暂停）功能
   pauseOnPagerHover: 0, // 若为true则当鼠标滑过页面时暂停
   autostop: 0, // 若为true则播放完'autostopCount'个幻灯片时自动停止
   autostopCount: 0, // 播放幻灯片个数
   delay: 0, // 第一张幻灯片的播放时延，可以为负，单位是毫秒
   slideExpr: null, // 要做切換的元素 例如:slideExpr: 'img'
   cleartype: !$.support.opacity, // 若为true，则应用clearType修正 (专为IE提供)
   cleartypeNoBg: false, // 若为true，则禁用附加的clearType修正
   nowrap: 0, // 若为ture则防止幻灯片换行
   fastOnEvent: 0, // 当手动切换时快速过渡
   randomizeEffects:1, // 当指定了多个效果时有效，若为true，则这些效果将随机出现
   rev: 0, // 若为true，则过渡效果反向播放
   manualTrump: true, // 若为true，则手动过渡会停止自动过渡
   requeueOnImageNotLoaded: true, // 如果某张图片幻灯片尚未加载，则重新加入队列
   requeueTimeout: 250, // 重新排队的时延（ms）
   activePagerClass: 'activeSlide', // 当页面链接被激活时的css类名
   updateActivePagerLink: null // 当页面链接被激活时的回调函数(添加/删除 activePagerClass 样式)
 };

站內搜尋

謝晒的PHP網頁設計

[jQuery] jQuery Cycle 圖片輪播套件

使用

选项