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});
});