2次循環後幻燈片停止？

Question

我想弄清楚如何設置我的滑塊停止2循環後。用下面的代碼處理這個問題的最佳方式是什麼？我應該將長度存儲在一個變量中進行計數，並設置一個條件來查看案例是否匹配並停止？有什麼想法嗎？

var slider = $(".box .slide"); 
var slideIndex = -1; 

function showNextSlide() { 
    ++slideIndex; 
    slide.eq(slideIndex % slide.length) 
     .fadeIn(700) 
     .delay(4000) 
     .fadeOut(700, showNextSlide); 
} 

showNextSlide(); 

Answer 1

您可能可以在showNextSlide中應用條件語句。

var numSlides = 123; // define or get the number of slides you have here 

function showNextSlide() { 
    if (slideIndex < 2* numSlides) { 
     ++slideIndex; 
     slider.eq(slideIndex % slider.length) 
      .fadeIn(700) 
      .delay(4000) 
      .fadeOut(700, showNextSlide); 
    } 
} 

Answer 2

我認爲你有一個錯字這裏，你只需要更新的slide實例slider。

沒有理由使用if陳述由其他答案/評論建議。

var slider = $(".box .slide"); 
var slideIndex = -1; 

function showNextSlide() { 
    ++slideIndex; 
    slider.eq(slideIndex % slider.length) 
     .fadeIn(700) 
     .delay(4000) 
     .fadeOut(700, showNextSlide); 
} 

showNextSlide(); 

jsfiddle demo