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

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

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

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

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

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

<div id="aDiv">
      <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> 

加上一点基本的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的强大远不止于此，下面列举一些它的基本参数：

1. fx:’fade’》值：字符串，作用：选择特效.切换效果是它的重头戏，我统计过，jquery.cycle.js支持27种切换效果，我一一进行了测试，列举在《jquery.cycle.js切换特效参数详解》这篇文章中了。
2. speed:300》值：正整数，作用：图片渐变效果持续时间
3. timeout:3000》值：正整数，作用：切换间隔时间
4. pause:1》值：布尔值，作用：决定鼠标指上去时是否暂停
5. next:”》值：字符串，实际是一个jquery对象，如’#s1′；作用：指定触发变动到下一张事件的元素
6. prev:’‘》值：同next；作用：指定触发变动到上一张事件的元素
7. pager:》值：一个jquery对象；作用：指定页码元素，如多图片滚动时那个数字序号条
8. pagerEvent:’mouseover’》值：鼠标事件；作用：指定页码触发事件
9. pauseOnPagerHover:true》值：布尔值；作用：为true时，鼠标指向页码区时暂停切换
10. before:》值：函数；作用：指定变动开始前调用的函数
11. after:》值：函数；作用：指定变动结束后调用的函数

其中，next,prev,pager在制作带页码的多图片切换时非常有用。

不常用的参数：

1. easing:”》值：字符串，作用：选择缓动公式 （需配合Easing Plugin才能使用）
2. random:1》值：布尔值，作用：是否随机跳转
3. delay:》值：整数，作用：指定第一次变动开始前的延迟（不太确定）
4. sync:》值：布尔值，作用：为false时，前一张图片变动完成后，才会执行后一张图片的变动
5. shuffle:{top:300,left:300}》值：对象，作用：当fx:’shuffle’时才能使用，定义shuffle效果的偏移位置

基本上可以不用的参数：

• cssBefore

  ：变动前元素的CSS样式

• animIn

  ：变动进入时的CSS

• animOut

  ：变动淡出时的CSS

• cssAfter

  ：变动结束后的CSS

• cssFirst：英文读不懂了。。

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

————————————————–

jquery.cycle.js的27种切换效果参数在此

 http://www.jo2.org/193.html