如何在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); 
}); 

让我知道你是否需要进一步的帮助。