jQuery - 間隔不執行最後一張幻燈片 - 動畫故障

Question

我創建一個滑塊，但使用一堆divs而不是圖像。我總共有3個div，前兩個可以移動得很好，但最後一個很快就會飛快 - 它顯示一會兒，然後回到第一個div。我只是想讓它顯示與前兩個相同的時間。這裏是我的html代碼：

<div id="ibToShow"> 
    <div id='sliderWrapper'> 
     <div class="infoBox" id="infob1"> 
      blablabla 
     </div> 

     <div class="infoBox" id="infob2"> 
      blablabla 
     </div> 

     <div class="infoBox" id="infob3">    
      blablabla 
     </div> 
    </div> 
</div> 

這是我的jQuery代碼：

$(function() { 
var width = '55vw'; 
var showTime = 2000; 
var animationSpeed = 500; 
var currentDiv = 1; 

var $slider = $('#ibToShow'); 
var $sliderWrapper = $slider.find('#sliderWrapper'); 
var $infoBox = $sliderWrapper.find('.infoBox'); 

var interval; 

function startSlider() { 
    interval = setInterval(function() { 
     $sliderWrapper.animate({'margin-left': '-=' + width}, animationSpeed, function(){ 
       currentDiv++; 
      if (currentDiv === $infoBox.length){ 
       currentDiv = 1; 
       $sliderWrapper.css('margin-left', 0); 
      } 
     }) 
    }, showTime); 
} 

function stopSlider() { 
    clearInterval(interval); 
} 

$sliderWrapper.on('mouseenter', stopSlider).on('mouseleave', startSlider); 

startSlider(); 
}); 

我意識到這可能是因爲第三格出現了動畫後立即停止。但是，它不應該等待showTime中設置的內容嗎？

此問題仍未解決。任何接受者？

Answer 1

在上一個動畫結束之後，您正在將餘量更改爲0。 我認爲這樣會更好：

function startSlider() { 
    interval = setInterval(function() { 
     if(currentDiv++ <== $infoBox.length) { 
      $sliderWrapper.animate({'margin-left': '-=' + width}, animationSpeed); 
     } 
     else { 
      $sliderWrapper.animate({'margin-left': '0'}, animationSpeed); 
      currentDiv = 0; 
     } 
    }, showTime); 
}