图片切换插件jquery.cycle.js参数详解
图片展示效果的jQuery插件很多,都非常实用, 这个jQuery Cycle Plugin循环插件,不仅支持图片循环,而且支持任意元素的循环功能,效果非常丰富,可支持鼠标悬停暂停,自动停止,开始和结束事件调用等等,目前你所 看到的图片效果大部分都支持,可以想象这个插件的强大噢。
效果演示
使用实例
一,包含文件部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
二,需要自定义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 }
三,HTML部分
<div id="biuuu" class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
四,Javascript部分
$('#biuuu').cycle('fade');
jQuery Cycle Plugin插件使用非常简单,如上实例对ID为biuuu的DIV元素调用jQuery Cycle Plugin,这样就实现了一个图片循环展示的效果,jQuery Cycle Plugin可选效果非常多,如下:
- fx: ’fade’ 值:字符串,作用:选择特效.切换效果是它的重头戏,目前jquery.cycle.js支持27种切换效果。
- 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:
jquery.cycle.js现在暂时支持27种切换特效:
1. blindX:前图向右滑动渐隐,后图向左滑动渐显
2. blindY:前图向下滑动渐隐,后图向上滑动渐显
3. blindZ:前图向右下滑动渐隐,后图向左上滑动渐显
4. cover:前图不动,后图从右划入覆盖前图
5. curtainX:图片被分成左右两段,前图两段向右滑动渐隐,后图两段向左滑动渐显(酷!)
6. curtainY:图片被分成上下两段,前图两段向下滑动渐隐,后图两段向上滑动渐显(酷!)
7. fade:前图渐隐,同时后图渐显
8. fadeZoom:前图渐隐,同时后图由小变大覆盖前图
9. growX:前图不动,后图宽度从0增至100%,出发点:中间
10. growY:前图不动,后图高度从0增至100%,出发点:中间
11. scrollUp:同时向上滑动至后图完全显示
12. scrollLeft:同时向左滑动至后图完全显示
13. scrollRight:同时向右滑动至后图完全显示
14. scrollDown:同时向下滑动至后图完全显示
15. scrollHorz:同Left,但手动触发时,如果触发数字小于当前,则反向滚动
16. scrollVert:同Down,但手动触发时,如果触发数字小于当前,则反向滚动
17. shuffle:前图向左下方飞出,然后飞入后图背后(酷!)
18. slideX:前图宽度由100减至0,后图宽度由0增至100%(酷!)
19. slideY:前图高度由100减至0,后图高度由0增至100%
20. toss:前图向右上方飞至消失
21. turnUp:前图不动,后图从底部向上滑入
22. turnDown:前图向下滑出,后图不动
23. turnLeft:前图不动,后图从右向左滑入
24. turnRight:前图向右滑出,后图不动
25. uncover:前图向左滑出,后图不动
26. wipe:前图不动,后图的宽和高同时由0增至100%覆盖前图,出发点:左上
27. zoom:前图缩小至0,后图由0放大至100%,出发点:中间
其中:cover,uncover,turn系列效果相似