方便实用的Jquery Cycle特效实例

第一步：老样的先写入Html结构，图片数量不限，这里写的是3个。class="pics"> 

div 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 >

第二步： 再写入CSS代码，非常简单，只需定义装图片的DIV大小与图片的表现样式，这里就不多说明了，相信大家一看就懂。

.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，包括Jquery,cycle，easing,其中easing不是必须的，只是部分特效需要用到它。

< script  type = "text/javascript"  src = "http://ajax. /ajax/libs/jquery/1.7/jquery.min.js" ></ script > < script  type = "text/javascript"  src = "js/jquery.cycle.all.js" ></ script > < script  type = "text/javascript"  src = "js/jquery.easing.1.3.js" ></ script > 第四步：写入JS。

$( '.pics' ).cycle({               fx:  'fade'  // 这里可以选择不同的效果，具体的效果列表，请往下看。          });     });

这是不同效果的参数，换上使可实现N多不同的效果，具体是什么的样效果，还是自己动手体验吧。

blindX

blindY

blindZ

cover

curtainX 

curtainY

fade

fadeZoom

growX

growY 

scrollUp 

scrollDown 

scrollLeft

scrollRight 

scrollHorz

scrollVert 

shuffle

slideX

slideY

toss

turnUp

turnDown

turnLeft

turnRight

uncover

wipe

zoom

实例效果：http://www.jqcool.net/demo/201401/cycle/