jQuery（自定义）传送带不重复

Question

我已经从我从网上拿起的位创建了自定义的jQuery传送带，但是我无法正常工作。

发生的一切就是转盘正常工作，但仍然向左滑动。经过一些调试后，我发现carousel_ul的左边不断减去图像宽度，但不会像我认为的那样回到-960。

我在这里看到了一些关于旋转木马的文章，但没有一篇使用我要做的方法。

这里是我的代码：

HTML：

<div id="carousel_container"> 
     <div id="carousel_inner"> 
      <ul id="carousel_ul"> 
       <li> 
        <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-1.jpg?1321" alt="" /> 
       </li> 
       <li> 
         <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-2.jpg?1321" alt="" /> 
       </li> 
       <li> 
         <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-3.jpg?1321" alt="" /> 
       </li> 
       <li> 
         <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-4.jpg?1321" alt="" /> 
       </li> 
      </ul>      
     </div> 
    </div> 

CSS：

#carousel_ul { 
position:relative; 
left:-960px; /* important (this should be negative number of list items width(including margin) */ 
list-style-type: none; /* removing the default styling for unordered list items */ 
margin: 0px; 
padding: 0px; 
width:9999px; /* important */ 
/* non-important styling bellow */ 
padding-bottom:0px; 
} 

#carousel_ul li{ 
float: left; /* important for inline positioning of the list items */ 
width:960px; /* fixed width, important */ 
/* just styling bellow*/ 
padding:0px; 
height:300px; 
background: #000000; 
margin-top:0px; 
margin-bottom:0px; 
margin-left:0px; 
margin-right:0px; 
} 

#carousel_ul li img { 
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/ 
/* styling */ 
cursor:pointer; 
cursor: hand; 
border:0px; 
} 

的jQuery：

jQuery(document).ready(function ($) { 
//rotation speed and timer 
var speed = 2000; 
var run = setInterval('rotate()', speed); 

jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last')); 
}); 

//a timer will call this function, and the rotation will begin :) 
function rotate() { 
var item_width = jQuery('#carousel_ul li').outerWidth() ; 

//calculate the new left indent of the unordered list 
var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - item_width; 

//alert(left_indent); 

//make the sliding effect using jquery's anumate function ' 
jQuery('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:1000},function(){ 

    //get the first list item and put it after the last list item (that's how the infinite effects is made) ' 
    jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first')); 

    //and get the left indent to the default -960px 
    jQuery('#carousel_ul').css({'left' : '-960px'}); 
}); 
} 

它是由一对夫妇的例子屠杀。

碰巧我无法按照自己的意愿工作。

Answer 1

它不工作的原因是因为动画函数没有被触发。只需简单设置持续时间，转盘就能正确地满足您的要求。

//make the sliding effect using jquery's anumate function ' 
jQuery('#carousel_ul').animate({'left' : left_indent}, 1000,function(){ 

    //get the first list item and put it after the last list item (that's how the infinite effects is made) ' 
    jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first')); 

    //and get the left indent to the default -960px 
    jQuery('#carousel_ul').css({'left' : '-960px'}); 
}); 

一旦您对旋转木马感到满意，我会建议将其重构为一个jQuery插件或小部件，以方便重用。