Friday, April 6, 2012

[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 样式)
 };

No comments:

Post a Comment