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

当滚动到左侧时，jQuery无限轮播留下空白空间

1 个答案: