jQuery 无限旋转木马向左滚动时留下空 space

Question

我正在使用 jQuery 响应式轮播来显示一些图像和文本。单击向前（向右）按钮时轮播效果很好（隐藏的幻灯片在其到位之前平滑显示），但是当单击向后（向左）按钮时它有一个奇怪的行为，因为空白 space （与幻灯片一样宽）出现，只有在动画完成后才突然出现幻灯片。

这是我的 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});
});

jQuery 无限旋转木马向左滚动时留下空 space

jQuery infinite carousel leaves an empty space when scrolling to the left

css

jquery

infinite

carousel