使用jquery创建个可循环的图片滚动

发布于，归属于jquery教程。 沙发还空着，抢！ 共有518人围观    

来看其实现过程

创建如下html结构

  1. <div id="carousel"> 
  2.     <div id="buttons"> 
  3.         <a href="#" id="prev">prev</a> 
  4.         <a href="#" id="next">next</a> 
  5.         <div class="clear"></div> 
  6.     </div> 
  7.       
  8.     <div class="clear"></div> 
  9.  
  10.     <div id="slides">   
  11.         <ul> 
  12.             <li><img src="slide1.gif" width="240" height="240" alt="Slide 1"/></li> 
  13.             <li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li> 
  14.             <li><img src="slide3.gif" width="240" height="240" alt="Slide 3"/></li> 
  15.         </ul> 
  16.         <div class="clear"></div> 
  17.     </div> 
  18.  
  19. </div>

不算复杂的结构。#buttons为按钮容器，#slides为图片容器。

来看css代码

  1. #carousel {  
  2.     width:255px;  
  3.     height:290px;     
  4.     margin:0 auto;  
  5. }  
  6.  
  7. #slides {  
  8.     overflow:hidden;  
  9.     /* fix ie overflow issue */ 
  10.     position:relative;  
  11.     width:250px;  
  12.     height:250px;  
  13.     border:1px solid #ccc;  
  14. }  
  15.  
  16. /* remove the list styles, width : item width * total items */    
  17. #slides ul {  
  18.     position:relative;  
  19.     left:0;  
  20.     top:0;  
  21.     list-style:none;  
  22.     margin:0;  
  23.     padding:0;    
  24.     width:750px;              
  25. }  
  26.  
  27. /* width of the item, in this case I put 250x250x gif */ 
  28. #slides li {  
  29.     width:250px;  
  30.     height:250px;     
  31.     float:left;  
  32. }  
  33.  
  34. #slides li img {  
  35.     padding:5px;  
  36. }  
  37.  
  38. /* Styling for prev and next buttons */ 
  39. #buttons {  
  40.     padding:0 0 5px 0;    
  41.     float:right;  
  42. }  
  43.  
  44. #buttons a {  
  45.     display:block;   
  46.     width:31px;   
  47.     height:32px;  
  48.     text-indent:-999em;  
  49.     float:left;  
  50.     outline:0;  
  51. }  
  52.  
  53. a#prev {  
  54.     background:url(arrow.gif) 0 -31px no-repeat;   
  55. }  
  56.  
  57. a#prev:hover {  
  58.     background:url(arrow.gif) 0 0 no-repeat;  
  59. }  
  60.  
  61. a#next {  
  62.     background:url(arrow.gif) -32px -31px no-repeat;   
  63. }  
  64.  
  65. a#next:hover {  
  66.     background:url(arrow.gif) -32px 0 no-repeat;  
  67. }  
  68.  
  69. .clear {clear:both}

来看其javascript

  1. $(document).ready(function() {  
  2.  
  3.     //图片切换的时间间隔  
  4.     var speed = 5000;  
  5.     var run = setInterval('rotate()', speed);     
  6.       
  7.     //获取图片容器li的盒宽度（包含外边距） 
  8.     var item_width = $('#slides li').outerWidth();   
  9.     var left_value = item_width * (-1);   
  10.           
  11.     //将最后一个li移到第一个li前面
  12.     $('#slides li:first').before($('#slides li:last'));  
  13.       
  14.     //设置整个图片容器的left值为负的li宽度  
  15.     $('#slides ul').css({'left' : left_value});  
  16.  
  17.     //单击前一页触发的事件
  18.     $('#prev').click(function() {  
  19.  
  20.         //获取移动的值            
  21.         var left_indent = parseInt($('#slides ul').css('left')) + item_width;  
  22.  
  23.         //滚动图片容器             
  24.         $('#slides ul').animate({'left' : left_indent}, 200,function(){      
  25.  
  26.             //将最后一个li移到第一个li前面              
  27.             $('#slides li:first').before($('#slides li:last'));             
  28.  
  29.             //设置ul的left值 
  30.             $('#slides ul').css({'left' : left_value});  
  31.           
  32.         });  
  33.  
  34.         //取消按钮默认动作             
  35.         return false;  
  36.               
  37.     });  
  38.  
  39.    
  40.     //与上面类似 
  41.     $('#next').click(function() {  
  42.           
  43.         //get the right position  
  44.         var left_indent = parseInt($('#slides ul').css('left')) - item_width;  
  45.           
  46.         //slide the item  
  47.         $('#slides ul').animate({'left' : left_indent}, 200, function () {  
  48.               
  49.             //move the first item and put it as last item  
  50.             $('#slides li:last').after($('#slides li:first'));                    
  51.               
  52.             //set the default item to correct position  
  53.             $('#slides ul').css({'left' : left_value});  
  54.           
  55.         });  
  56.                    
  57.         //cancel the link behavior  
  58.         return false;  
  59.           
  60.     });          
  61.  
  62.     $('#slides').hover(  
  63.           
  64.         function() {  
  65.             clearInterval(run);  
  66.         },   
  67.         function() {  
  68.             run = setInterval('rotate()', speed);     
  69.         }  
  70.     );   
  71.           
  72. });  
  73.  
  74.   
  75. function rotate() {  
  76.     $('#next').click();  
  77. }

已经做了注释，不再解释，有问题可给我留言。
原文：http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类