方便实用的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/