如何在jQuery幻燈片中設置每張幻燈片的持續時間？

Question

我正在製作幻燈片。這張幻燈片都是div的內容。現在我有一個函數，它將一個類添加到容器中的下一個項目。我將此功能稱爲：setInterval("slideSwitch()", 10000)它可以工作，但所有幻燈片的持續時間相同。我想要的是，例如一張幻燈片顯示10秒，下面顯示15秒。有沒有辦法設置每張幻燈片的持續時間？或者我應該使用JavaScript/jQuery插件？

Answer 1

完成滑動計時器的最佳方法是使用遞歸函數調用來設置超時並調用相同的操作。我創建了一個小提琴，但爲了清晰起見，我將在此處發佈代碼。你可以進入並使用代碼來看看它是如何工作的。這裏是鏈接到fiddle。

function slideshow(action, time, index, max) { 
    setTimeout(function() { 
    action.call(this, index, max); 
    if (index === 0) { 
     slideshow(action, slideshow.duration.min, index + 1, max); 
    } else if (index < max) { 
     slideshow(action, slideshow.duration.max, index + 1, max); 
    } else { 
     slideshow(action, slideshow.duration.max, 0, max); 
    } 
    }, time); 
} 
slideshow.duration = { 
    min: 1000, 
    max: 2000 
}; 
slideshow.slideSpeed = 'fast'; 

$(function() { 
    var slides = $('.slides .square'); 
    slideshow(function(idx, max) { 
    switch (idx) { 
     case 0: 
     slides.eq(max).fadeOut(slideshow.slideSpeed, function() { 
      slides.eq(idx).fadeIn(slideshow.slideSpeed); 
     }); 
     break; 
     case 1: 
     slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() { 
      slides.eq(idx).fadeIn(slideshow.slideSpeed); 
     }); 
     break; 
     case 2: 
     slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() { 
      slides.eq(idx).fadeIn(slideshow.slideSpeed); 
     }); 
     break; 
     case 3: 
     slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() { 
      slides.eq(idx).fadeIn(slideshow.slideSpeed); 
     }); 
     break; 
    } 
    }, slideshow.duration.min, 0, 3); 
}); 

讓我知道你是否需要進一步的幫助。