首页 > 代码库 > jquery.cycle.js图片切换插件参数详解
jquery.cycle.js图片切换插件参数详解
jquery.cycle.js是jquery的一个插件,主要用来实现千奇百怪的图片切换效果---当然,不是图片也能切换,只是它经常被用来做图片切换而已;这个插件总共有27种效果,是非常好的插件,用到手机版开发是很好的插件来的;
当然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:英文读不懂了。。
以上参数太复杂,可以实现很多个效果的哦!
jquery.cycle.js切换效果参数解析
- 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%,出发点:中间
这个27种效果是非常不错的,是可以试试这个方法!
文件提供下载的网址:http://yunpan.cn/QTAVD8c4bbGwj
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。