转自：国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/
自从使用了jquery.cycle.js，我觉得再也不用自己写javascript的图片切换效果了，因为一想到它，我就会有一种深深的无力感，就好像面对着一座翻不过去的大山…
吐槽完毕，如标题所诉，jquery.cycle.js是jquery的一个插件，主要用来实现千奇百怪的图片切换效果——当然，不是图片也能切换，只是它经常被用来做图片切换而已。
没使用过jQuery.Cycle.js的同学，可以点这里（官网）去摸摸底，看看有没有被震一下的感觉。
jquery.cycle.js能实现的切换效果非常复杂，相伴而来的就是它也有不简单的参数设置，不过我会给大家一一描述清楚的。
先说下基本使用，首先你的HTML结构应该类似这样：
<divid="aDiv"> <imgsrc="http://blog.163.com/xz551@126/blog/images/beach1.jpg"width="200"height="200"/> <imgsrc="http://blog.163.com/xz551@126/blog/images/beach2.jpg"width="200"height="200"/> <imgsrc="http://blog.163.com/xz551@126/blog/images/beach3.jpg"width="200"height="200"/> </div>
加上一点基本的CSS：
.pics { height:232px; width:232px; padding:0; margin:0; }
.pics img { padding:15px; border:1px solid #ccc; background-color:#eee; width:200px; height:200px; top:0; left:0; }
$(‘#aDiv’).cycle();
这样，就可以实现基本的切换效果了，默认效果是淡入淡出。
当然jquery.cycle.js的强大远不止于此，下面列举一些它的基本参数：
- fx:’fade’》值：字符串，作用：选择特效.切换效果是它的重头戏，我统计过，jquery.cycle.js支持27种切换效果，我一一进行了测试，列举在《jquery.cycle.js切换特效参数详解》这篇文章中了。
- speed:300》值：正整数，作用：图片渐变效果持续时间
- timeout:3000》值：正整数，作用：切换间隔时间
- pause:1》值：布尔值，作用：决定鼠标指上去时是否暂停
- next:”》值：字符串，实际是一个jquery对象，如’#s1′；作用：指定触发变动到下一张事件的元素
- prev:’‘》值：同next；作用：指定触发变动到上一张事件的元素
- pager:》值：一个jquery对象；作用：指定页码元素，如多图片滚动时那个数字序号条
- pagerEvent:’mouseover’》值：鼠标事件；作用：指定页码触发事件
- pauseOnPagerHover:true》值：布尔值；作用：为true时，鼠标指向页码区时暂停切换
- before:》值：函数；作用：指定变动开始前调用的函数
- after:》值：函数；作用：指定变动结束后调用的函数
其中，next,prev,pager在制作带页码的多图片切换时非常有用。
不常用的参数：
- easing:”》值：字符串，作用：选择缓动公式 （需配合Easing Plugin才能使用）
- random:1》值：布尔值，作用：是否随机跳转
- delay:》值：整数，作用：指定第一次变动开始前的延迟（不太确定）
- sync:》值：布尔值，作用：为false时，前一张图片变动完成后，才会执行后一张图片的变动
- shuffle:{top:300,left:300}》值：对象，作用：当fx:’shuffle’时才能使用，定义shuffle效果的偏移位置
基本上可以不用的参数：
- cssBefore：变动前元素的CSS样式
- animIn：变动进入时的CSS
- animOut：变动淡出时的CSS
- cssAfter：变动结束后的CSS
- cssFirst：英文读不懂了。。
以上参数太复杂，但可以实现惊天地泣鬼神的效果，只是复杂的让我实在不想解释了…有兴致的同学们，还是去官网文档查看吧
- 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：前图不动，后图从底部向上滑入
- turnDown：前图向下滑出，后图不动
- turnLeft：前图不动，后图从右向左滑入
- turnRight：前图向右滑出，后图不动
- uncover：前图向左滑出，后图不动
- wipe：前图不动，后图的宽和高同时由0增至100%覆盖前图，出发点：左上
- zoom：前图缩小至0，后图由0放大至100%，出发点：中间