Question

我想要完成的是幻灯片，其中一张幻灯片持续10秒 - 而幻灯片中的所有其他幻灯片持续4秒。在我下面的代码中，current.id == 1条件是我的第一张幻灯片。当DOM加载时，它会检查首先是什么幻灯片，如果它是current.id == 1，它会使所有转换为10秒。这不是我想要的。任何建议我如何能够每隔4秒将所有其他幻灯片放到间隔时间，并且每次翻转到幻灯片时仍然保持我的主幻灯片持续10秒？

很抱歉，如果这有点令人困惑。谢谢你的帮助！

/* Setting auto-advance every 10 seconds for main slide, 4 seconds for all others */

var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
  auto=setInterval(function(){

    next();

  },10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
  auto=setInterval(function(){
    next();

  },4*1000);//4 seconds each other slide.
}

Answer 1

如果您想要更改间隔，则无法使用setInterval()，因为您只需调用一次然后以相同的间隔重复运行，直到您停止它为止。您可以在每张幻灯片上使用setTimeout()，如下所示：

if (current.id == 1) { //this is the only slide I want lasting 10 seconds.
    setTimeout(next, 10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
    setTimeout(next, 4*1000);//4 seconds each other slide.
}

P.S。您可能还想注意，如果您只想调用您已经定义的函数，则setTimeout()或setInterval()不需要匿名函数。< / p>

Answer 2

您应该使用setTimeout代替setInterval。

var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
    auto=setTimeout(function(){
       next(); 
    },10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
    auto=setTimeout(function(){
       next();
    },4*1000);//4 seconds each other slide.
}

Answer 3

我这样写我的JS。在我看来它更具可读性并且确实有帮助虽然通常我不包括这样的评论

您的next()函数应该自行调用

$(document).ready(function () {
   var Page = {};

   Page.slider = (function () {
       return {
           init: function () {
              setTimeout(function () {
                  Page.slider.nextSlide();
              }, 10*1000);
           },
           nextSlide: function () {
              var duration = 4;
              if (Page.slider.isShowingFirst()) {
                  duration = 10;
              }

              //code to handle transitioning slides

              setTimeout(function () {
                  Page.slider.nextSlide();
              }, duration*1000);
           },
           isShowingFirst: function () {
              //return boolean on whether it's showing the first slide or not
           }
       }
   })();

   Page.slider.init();
});

在幻灯片中获取一张幻灯片可以在两个间隔之间保持更长时间

3 个答案: