Jquery - Carousel上一個按鈕

Question

下一個按鈕很好，但對於上一個按鈕，它跳轉不順暢。提前感謝大家幫助我。爲什麼我的上一個按鈕不起作用？

HTML

<div class="slide"> 
     <ul class="wrap-all"> 
      <li> 
       <img src="index.jpg" alt="" /> 
      </li> 
      <li> 
       <img src="index1.jpg" alt="" /> 
      </li> 
      <li> 
       <img src="index2.jpg" alt="" /> 
      </li> 
      <li> 
       <img src="index3.jpg" alt="" /> 
      </li> 
     </ul> 
     <div class="arrow"> 
      <a href="#" class="pre">Previous</a>  
      <a href="#" class="next">Next</a> 
     </div> 
</div> 

CSS

.slide{ 
    width: 550px; 
    margin: 0 auto; 
    height: 130px; 
    border: 1px solid #cccccc; 
    overflow: hidden; 
    position: relative; 
} 
ul.wrap-all{ 
    list-style: none; 
    position: relative; 
} 
ul.wrap-all li{ 
    float: left; 
    width: 275px; 

} 
.next{ 
    position: absolute; 
    top: 50%; 
    right: 0; 
    color: white; 
} 
.pre{ 
    position: absolute; 
    top: 50%; 
    left: 0; 
    color: white; 
} 

JS

$(document).ready(function() { 
    var itemWidth = $('.wrap-all li').outerWidth(true); 
    var imageLength = $('.wrap-all li').length; 
    var totalImage = itemWidth * imageLength; 
    $('.wrap-all').css('width', totalImage);  
     $('.next').click(function(e){ 
      e.preventDefault(); 
      $('.wrap-all:not(:animated)').animate({ 
      left: -itemWidth 
      },200, 
      function(){ 
       $('.wrap-all li:last').after($('.wrap-all li:first')); 
       $('.wrap-all').css({'left': 0}); 
      }); 
     }); 
     $('.pre').click(function(e){ 
      e.preventDefault(); 
      $('.wrap-all:not(:animated)').animate({'left' : +itemWidth}, 200,function(){ 
      $('.wrap-all li:first').before($('.wrap-all li:last')); 
      $('.wrap-all').css({'left' : 0}); 
      }); 
     }); 
    }); 

Answer 1

與爲什麼它不工作，以及正在啓動因爲在運行之前，動畫在幻燈片中實際上沒有以前的圖像。所以在動畫從左向右滑動之後，它會添加第一個圖像。

解決此問題的一種方法是將圖像包裹在另一個隱藏第一個圖像的div標籤中，並顯示下一個2，這樣，從左向右看動畫顯得平滑，因爲添加的圖像仍然隱藏。

下面是我用來使動畫看起來更流暢的一些代碼。 （我沒有修改你用這樣JS我不會在這裏包括它）

HTML

<div class="slide"> 
<div class="viewer"> 
    <ul class="wrap-all"> 
     <li> 
      <img src="http://ckinknoazoro.files.wordpress.com/2011/06/random.jpg" alt="" /> 
     </li> 
     <li> 
      <img src="http://ts3.mm.bing.net/th?id=H.4936237002655974&pid=1.7" alt="" /> 
     </li> 
     <li> 
      <img src="http://images2.fanpop.com/images/photos/5700000/Random-random-5719756-1280-800.jpg" alt="" /> 
     </li> 
     <li> 
      <img src="http://images2.fanpop.com/image/photos/9400000/Random-random-9449476-1680-1050.jpg" alt="" /> 
     </li> 
    </ul> 
</div> 

<div class="arrow"> 
    <a href="#" class="pre">Previous</a>  
    <a href="#" class="next">Next</a> 
</div> 
</div> 

CSS

img { 
    width: 100px; 
    height: 100px; 
} 

.viewer{ 

    width:800px; 
    overflow:hidden; 
    margin-left: -200px; 
} 
.slide{ 
    width: 600px; 
    height: 130px; 
    border: 1px solid #cccccc; 
    overflow: hidden; 
    position: relative; 
    margin:auto; 
} 
ul.wrap-all{ 
    list-style: none; 
    position: relative; 
} 
ul.wrap-all li{ 
    float: left; 
    width: 275px; 

} 
.next{ 
    position: absolute; 
    top: 50%; 
    right: 0; 
    color: black 
} 
.pre{ 
    position: absolute; 
    top: 50%; 
    left: 0; 
    color: black 
} 

我希望這有助於

Answer 2

我這麼認爲

$(document).ready(function() { 
var itemWidth = $('.wrap-all li').outerWidth(true); 
var imageLength = $('.wrap-all li').length; 
$('.wrap-all').css({'left': -itemWidth}); 
var totalImage = itemWidth * imageLength; 
$('.wrap-all').css('width', totalImage);  
    $('.next').click(function(e){ 
     e.preventDefault(); 
     $('.wrap-all:not(:animated)').animate({ 
     left: (-2 * itemWidth) 
     },200, 
     function(){ 
      $('.wrap-all li:last').after($('.wrap-all li:first')); 
      $('.wrap-all').css({'left': -itemWidth}); 
     }); 
    }); 
    $('.pre').click(function(e){ 
     e.preventDefault(); 
     $('.wrap-all:not(:animated)').animate({'left' : 0}, 200,function(){ 
     $('.wrap-all li:first').before($('.wrap-all li:last')); 
     $('.wrap-all').css({'left' : -itemWidth}); 
     }); 
    }); 
});