jquery.cycle.js简单用法实例

样式：

a{text-decoration: none;}
*{margin:0; padding:0;}
/*容器设置*/
.player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padding:13px 0px 0px 12px;}
.player ul{ width:198px; height:213px; border:solid 1px #ebe2d3; overflow:hidden;}
.player li{ width:196px; height:211px;  border:solid 1px #b9a686; position:relative;}
/*播放按钮编号*/
.number{ position:absolute; top:233px; left:147px; width:70px; height:18px;}
.number a{display:block;position:absolute; width:15px; height:15px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_14.jpg) no-repeat; position:absolute; font-size:12px; font-family:"宋体"; color:#732a0a; text-align:center; line-height:15px;}
.number .active{ color:#fff;}
.number .num1{top:0px; left:0px;}
.number .num2{top:0px; left:16px;}
.number .num3{top:0px; left:32px;}
.number .num4{top:0px; left:48px;}

html:js文件可以自己再网上下载。

<div class="player">
<ul>
<li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_16.jpg" width="196" height="211" title="十大超级军团称号" /></li>
<li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_17.jpg" width="196" height="211"title="万元现金" /></li>
<li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_18.jpg" width="196" height="211" title="畅游一卡通" /></li>
<li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_19.jpg"width="196" height="211" title="军团特权值" /></li>
</ul>
<div class="number"></div>
</div>
<div>
<a href="javascript:void(0);" class="prev">上一个</a>
<a href="javascript:void(0);" class="next">下一个</a>
</div>
<script type="text/javascript" src="http://www1.changyou.com/scripts/jquery.min.js"></script>
<script type="text/javascript" src="http://www1.changyou.com/scripts/jquery.cycle.all.min.js"></script>

$('.player ul').cycle({
fx: 'fade',
timeout: 4000, // 幻灯片过渡间隔，单位是毫秒 (若值为0则不自动切换)
pause: 1 , // 过渡的速度
pager: '.number',// 按钮容器元素
prev:'.prev',
next:'.next',
pagerEvent: 'mouseover', // 按钮驱动页面导航的事件
cleartype: !$.support.opacity, // 若为true，则应用clearType修正 (专为IE提供)是否支持半透明效果
activePagerClass: 'active', // 当按钮链接被激活时的css类名
pagerAnchorBuilder: function(idx, slide) {  // 用于建立按钮超链接的回调函数:// function(index, DOMelement)
idx += 1;
return '<a href="javascript:void(0)" class="num'+idx+'">'　+ idx + '</a>';
}
});

参数说明：

1.官网：http://jquery.malsup.com/cycle/
demo: http://jquery.malsup.com/cycle/adv.html 2.
fx参数设置过度效果
jquery.cycle.js现在暂时支持27种切换特效， 测试如下，以字母排序：

blindX:前图向右滑动渐隐，后图向左滑动渐显
blindX:前图向下滑动渐隐，后图向上滑动渐显
blindX:前图向右下滑动渐隐，后图向左上滑动渐显
cover:前图不动，后图从右划入覆盖前图
curtainX：图片被分成左右两段，前图两段向右滑动渐隐，后图两段向左滑动渐显（酷！）
curtainY：图片被分成上下两段，前图两段向下滑动渐隐，后图两段向上滑动渐显（酷！）
fade:前图渐隐，同时后图渐显
fadeZoom：前图渐隐，同时后图由小变大覆盖前图
growX：前图不动，后图宽度从0增至100%,出发点：中间
growY：前图不动，后图高度从0增至100%，出发点：中间
scrollUp：同时向上滑动至后图完全显示
scrollLeft：同时向左滑动至后图完全显示
scrollRight：同时向右滑动至后图完全显示
scrollDown：同时向下滑动至后图完全显示
scrollHorz：同Left,但手动触发时，如果触发数字小于当前，则反向滚动
scrollVert：同Down,但手动触发时，如果触发数字小于当前，则反向滚动
shuffle：前图向左下方飞出，然后飞入后图背后（酷！）
slideX：前图宽度由100减至0，后图宽度由0增至100%（酷！）
slideY：前图高度由100减至0，后图高度由0增至100%
toss：前图向右上方飞至消失
turnUp：前图不动，后图从底部向上滑入
turn

3. 参数如下：

// 重写这个全局变量（每个都是可选的）
{
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.<a title="cycle" href="http://www.mileke.com/archives/tag/cycle">cycle</a>',//用于手动驱动上/下一张过渡的事件
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, // 选择幻灯片的表达式
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 样式)
};

文档以及源码下载：

jquery-cycle用法.rar