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);
});

如果您需要进一步的帮助，请与我们联系。

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

1 个答案: