jQuery无限大旋转木马在向左滚动时留下一个空空间

Question

我正在使用一个jQuery响应旋转木马来显示一些图像和文本。当单击前进(右)按钮时，旋转木马工作得很好(隐藏的幻灯片显示得很平稳，直到它到位)，但是当单击后(左)按钮时，它会有一种奇怪的行为，因为空白处(和幻灯片一样宽)会出现，而且只有在动画完成后，幻灯片才会突然出现。

这是我的html代码：

<div id='carousel_container'>  

  <div id='left_scroll'><img src='navleft.png' /></div>  

     <div id='carousel_inner'>

        <ul id="carousel_ul">
           <li> ....content...</li>
           <li> ....content...</li>
                   .........
        </ul>

     </div>

  <div id='right_scroll'><img src='navright.png' /></div> 

</div>

这是我的css：

#carousel_container{
    display:table;
    margin-left:auto;
    margin-right:auto;
}

#carousel_inner {  
  float:left;   
  width:660px;   
 overflow: hidden; 
}  

#carousel_ul {  
 position:relative;  
 left:0px;  
 list-style-type: none; 
 padding: 0px;
 margin:0;
 width:9999px; /* important */ 
 padding-bottom:10px;  
}  

#carousel_ul li{  
  float: left; 
  width:210px;  
  padding:0px;     
  margin-top:10px;  
  margin-bottom:10px;  
  margin-left:5px;  
  margin-right:5px;  
 }  


 #left_scroll, #right_scroll{  
    float:left;  
  }  

 #left_scroll img, #right_scroll img{  
   cursor: pointer;  
   cursor: hand;  
  }  

这是jQuery代码：

 jQuery(document).ready(function() {  

    //when user clicks the image for sliding right  
    jQuery('#right_scroll img').click(function(){  

    var item_width = jQuery('#carousel_ul li').outerWidth() + 10;  

    var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - 
     item_width;  

    jQuery('#carousel_ul').animate({'left' : left_indent},
     {duration:500, complete: function(){   

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

      jQuery('#carousel_ul').css({'left' : '0px'}); 

     }   
    });  
    });


    //when user clicks the image for sliding left  
    jQuery('#left_scroll img').click(function(){  

    var item_width = jQuery('#carousel_ul li').outerWidth() + 10;  


    var left_indent = parseInt(jQuery('#carousel_ul').css('left')) + 
    item_width;  


     jQuery('#carousel_ul').animate({'left' : left_indent},
     {duration:500, complete: function(){  

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

     jQuery('#carousel_ul').css({'left' : '0px'}); 

    }

    });  

  });  
});  

Answer 1

你告诉它在动画完成后旋转项目。这在前进时很好，因为您希望动画完成，然后将屏幕外的项推送到末尾。但是当你回去的时候，你需要把最后一个物品移到旋转木马的前面(屏幕外)，然后再动起来。类似于：

//when user clicks the image for sliding left  
jQuery('#left_scroll img').click(function(){
  var item_width = jQuery('#carousel_ul li').outerWidth() + 10;  

  // rotate elements
  jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last'));  

  // start offscreen
  jQuery('#carousel_ul').css({'left' : (-item_width)+'px'}); 

  // animate
  jQuery('#carousel_ul').animate({'left' : 0},{duration:500});
});