如何在 jquery 幻灯片中设置每张幻灯片的持续时间？

Question

我正在制作幻灯片。这张幻灯片都是 div 的，其中包含内容。现在我有一个函数可以将 class 添加到容器中的下一个项目。我用以下代码调用该函数：setInterval("slideSwitch()", 10000) 它可以工作，但所有幻灯片的持续时间都相同。我想要的是，例如一张幻灯片显示 10 秒，下一张显示 15 秒。有没有办法设置每张幻灯片的持续时间？或者我应该使用 javascript/jquery 插件吗？

Answer 1

实现滑动计时器的最佳方法是使用设置超时并调用相同操作的递归函数调用。我已经创建了一个 fiddle，但为了清楚起见，我将 post 代码放在这里。你可以进去玩一下代码，看看它是如何工作的。这是 link 到 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);
});

如果您需要进一步的帮助，请告诉我。

如何在 jquery 幻灯片中设置每张幻灯片的持续时间？

How to set a duration per slide in a jquery slideshow?

javascript

jquery

slideshow