jQuery Cycle Plugin

常温文
2023-12-01

图片插件,有十几种展示方式

http://www.malsup.com/jquery/cycle/


实例:

1 - Define Your Markup and Styles

All of the examples on this page use the following markup and CSS:

<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> 
.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 
} 

2 - Choose an Effect

You can choose from any of the following named effects:

  • 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
    $('#s4').cycle({ 
        fx:      'scrollDown', 
        speed:    300, 
        timeout:  2000 
    });
 类似资料:

相关阅读

相关文章

相关问答