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