jQuery无限轮播向左滚动时会留下空白答案

【问题标题】：jQuery infinite carousel leaves an empty space when scrolling to the leftjQuery无限轮播向左滚动时会留下空白
【发布时间】：2015-06-01 16:11:04
【问题描述】：

我正在使用 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'}); 

    }

    });  

  });  
});

【问题讨论】：

请创建一个 jsfiddle

标签： jquery css carousel infinite

【解决方案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});
});

【讨论】：