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

最新推荐文章于 2017-05-30 21:38:00 发布

SalmonellaVaccine

最新推荐文章于 2017-05-30 21:38:00 发布

阅读量1.4k

点赞数

分类专栏： JQuery JavaScript

JavaScript 同时被 2 个专栏收录

193 篇文章 0 订阅

订阅专栏

JQuery

70 篇文章 0 订阅

订阅专栏

http://www.ossez.com/thread-26902-1-1.html

图片展示效果的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系列效果相似