方便实用的Jquery Cycle特效实例

最新推荐文章于 2025-07-18 11:58:54 发布

原创最新推荐文章于 2025-07-18 11:58:54 发布 · 574 阅读

CC 4.0 BY-SA版权

57 篇文章

订阅专栏

本文介绍如何利用HTML、CSS及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