首页 人网动态技术交流 jquery图片切换插件jquery.cycle.js参数详解

jquery图片切换插件jquery.cycle.js参数详解

零下疯度 2023/12/19 9:07:44

自从使用了jquery.cycle.js,我觉得再也不用自己写javascript的图片切换效果了,因为一想到它,我就会有一种深深的无力感,就好像面对着一座翻不过去的大山…

吐槽完毕,如标题所诉,jquery.cycle.js是jquery的一个插件,主要用来实现千奇百怪的图片切换效果——当然,不是图片也能切换,只是它经常被用来做图片切换而已。

没使用过jQuery.Cycle.js的同学,可以点这里(官网)去摸摸底,看看有没有被震一下的感觉。

jquery.cycle.js能实现的切换效果非常复杂,相伴而来的就是它也有不简单的参数设置,不过我会给大家一一描述清楚的。

先说下基本使用,首先你的HTML结构应该类似这样:

<div id="aDiv">

<img src="http://blog.163.com/xz551@126/blog/images/beach1.jpg" width="200" height="200" />

<img src="http://blog.163.com/xz551@126/blog/images/beach2.jpg" width="200" height="200" />

<img src="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;

}



然后使用以下JS:

$(‘#aDiv’).cycle();


这样,就可以实现基本的切换效果了,默认效果是淡入淡出。


当然jquery.cycle.js的强大远不止于此,下面列举一些它的基本参数:


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:英文读不懂了。。

以上参数太复杂,但可以实现惊天地泣鬼神的效果,只是复杂的让我实在不想解释了…有兴致的同学们,还是去官网文档查看吧


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:前图不动,后图从底部向上滑入

turnDown:前图向下滑出,后图不动

turnLeft:前图不动,后图从右向左滑入

turnRight:前图向右滑出,后图不动

uncover:前图向左滑出,后图不动

wipe:前图不动,后图的宽和高同时由0增至100%覆盖前图,出发点:左上

zoom:前图缩小至0,后图由0放大至100%,出发点:中间

————————————————

版权声明:本文为CSDN博主「零下疯度」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/xiaojian1018/article/details/43851215


阅读 186
分享到: