而且 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