首页>>Jquery图片>>一次滑动一个图片 slide(2013-11-22)

一次滑动一个图片 slide

一次滑动一个图片 slide
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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

 

JavaScript Code
  1. <script>  
  2. $(document).ready(function() {  
  3.   
  4.     //rotation speed and timer  
  5.     var speed = 5000;  
  6.     var run = setInterval('rotate()', speed);     
  7.       
  8.     //grab the width and calculate left value  
  9.     var item_width = $('#slides li').outerWidth();   
  10.     var left_value = item_width * (-1);   
  11.           
  12.     //move the last item before first item, just in case user click prev button  
  13.     $('#slides li:first').before($('#slides li:last'));  
  14.       
  15.     //set the default item to the correct position   
  16.     $('#slides ul').css({'left' : left_value});  
  17.   
  18.     //if user clicked on prev button  
  19.     $('#prev').click(function() {  
  20.   
  21.         //get the right position              
  22.         var left_indent = parseInt($('#slides ul').css('left')) + item_width;  
  23.   
  24.         //slide the item              
  25.         $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){      
  26.   
  27.             //move the last item and put it as first item                 
  28.             $('#slides li:first').before($('#slides li:last'));             
  29.   
  30.             //set the default item to correct position  
  31.             $('#slides ul').css({'left' : left_value});  
  32.           
  33.         });  
  34.   
  35.         //cancel the link behavior              
  36.         return false;  
  37.               
  38.     });  
  39.   
  40.    
  41.     //if user clicked on next button  
  42.     $('#next').click(function() {  
  43.           
  44.         //get the right position  
  45.         var left_indent = parseInt($('#slides ul').css('left')) - item_width;  
  46.           
  47.         //slide the item  
  48.         $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {  
  49.               
  50.             //move the first item and put it as last item  
  51.             $('#slides li:last').after($('#slides li:first'));                    
  52.               
  53.             //set the default item to correct position  
  54.             $('#slides ul').css({'left' : left_value});  
  55.           
  56.         });  
  57.                    
  58.         //cancel the link behavior  
  59.         return false;  
  60.           
  61.     });          
  62.       
  63.     //if mouse hover, pause the auto rotation, otherwise rotate it  
  64.     $('#slides').hover(  
  65.           
  66.         function() {  
  67.             clearInterval(run);  
  68.         },   
  69.         function() {  
  70.             run = setInterval('rotate()', speed);     
  71.         }  
  72.     );   
  73.           
  74. });  
  75.   
  76. //a simple function to click next link  
  77. //a timer will call this function, and the rotation will begin :)    
  78. function rotate() {  
  79.     $('#next').click();  
  80. }  
  81.           
  82.           
  83.           
  84. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_110.html