responsiveslides.js - 为每张幻灯片分配特定的超时时间答案

【问题标题】：responsiveslides.js - Assign specific timeout to each slideresponsiveslides.js - 为每张幻灯片分配特定的超时时间
【发布时间】：2014-10-01 12:33:31
【问题描述】：

我使用 responsiveslides.js 创建了一个滑块。它包含 5 张不同的图片幻灯片。

我通常可以分配一个超时时间，例如 4000 毫秒，但它会分配给滑块的每个图像。

我想为每张图片幻灯片分配不同的超时时间。例如：

slide 1: timeout = 10000
slide 2: timeout = 2000
slide 3: timeout = 4000
slide 4: timeout = 4000
slide 5: timeout = 2000

我怎样才能获得它？可能吗？非常感谢您的帮助，并为我糟糕的英语感到抱歉。

我按照 Timctran 的建议编辑了代码，但我做错了。你能帮我找出这段代码有什么问题吗？

我尝试按照您的建议更改代码。我没有 javascript 代码经验，所以我做错了，滑块不再工作，所以我恢复到旧版本。以下是我修改代码的方式：

 // Array to enter timeout values.
        var desiredTimeouts = [10000, 2000, 4000, 4000, 2000];
    // Auto cycle
    if (settings.auto) {
        startCycle = function (i) {
            rotate = setTimeout(function () {
          // Clear the event queue
          $slide.stop(true, true);

          var idx = index + 1 < length ? index + 1 : 0;

          // Remove active state and set new if pager is set
          if (settings.pager || settings.manualControls) {
            selectTab(idx);
          }

          slideTo(idx);
        startCycle(index);
    }, desiredTimeout[i]);
};

      // Init cycle
      startCycle(index);
    }

    // Restarting cycle
    restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearTimeout(rotate);
        // Restart
        startCycle(index);
      }
    };

非常感谢您在更正代码方面的任何帮助。谢谢！

【问题讨论】：

我的回答对你有帮助吗？当我测试它时它可以工作。
我尝试按照您的建议更改代码。我没有 javascript 代码经验，所以我做错了，滑块不再工作，所以我恢复到旧版本。我在第一个问题中编写了更改后的代码。
你定义了desiredTimeouts（带一个s），但后来指的是单数。所以将desiredTimeout[i] 更改为desiredTimeouts[i]。在您上面提到的部分之后，还有额外的 clearInterval 需要更改。我已经添加了必要的更改，希望一个简单的替代品可以为你工作。
非常感谢！现在一切正常。我在下面添加完整的代码。
也许您可以将我的答案投票为对您有帮助的人。它本质上是完整的代码，只是为了清楚起见而缩短了。

标签： javascript jquery timeout responsive-slides

【解决方案1】：

responsiveslides.js 中有一个名为 rotate 的函数（第 232 行）。在该部分代码中，进行您在此处看到的任何更改：

// Array to enter timeout values.
var desiredTimeouts = [10000, 2000, 4000, 4000, 2000];
// Auto cycle
if (settings.auto) {
  startCycle = function (i) {
    rotate = setTimeout(function () {
      // Clear the event queue
      ...
      slideTo(idx);
      startCycle(index);
    }, desiredTimeout[i]);
  };
  // Init cycle
  startCycle(index);
}
...
     clearTimeout(rotate);
     startCycle(index);
...
     clearTimeout(rotate);

对脚本所做的更改摘要：

添加一行包含desiredTimeouts。
将setInterval 更改为setTimeout。
在函数末尾添加对startCycle的调用。
将clearInterval 的两个实例更改为clearTimeout
将index 作为startCycle 的参数调用。

【讨论】：

我尝试按照您的建议更改代码。我没有 javascript 代码经验，所以我做错了，滑块不再工作，所以我恢复到旧版本。我在第一个问题中编写了更改后的代码。
4 年后，这正是我想要的。先生，您是一个传奇人物！

【解决方案2】：

感谢 Timctran，我有了最终的解决方案。

打开 responsiveslides.js 文件并转到第 227 行（responsiveslides.js 版本 1.54）。

使用以下代码更正现有代码。在 var desiredTimeout 中插入所需的超时时间，以逗号分隔。

// Array to enter timeout values.
        var desiredTimeout = [10000, 4500, 4500, 4500];

    // Auto cycle
    if (settings.auto) {
        startCycle = function (i) {
            rotate = setTimeout(function () {
                // Clear the event queue
                $slide.stop(true, true);

                var idx = index + 1 < length ? index + 1 : 0;

                // Remove active state and set new if pager is set
                if (settings.pager || settings.manualControls) {
                    selectTab(idx);
                }

          slideTo(idx);
          startCycle(index);
          }, desiredTimeout[i]);
        };

      // Init cycle
      startCycle(index);
    }

    // Restarting cycle
    restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearTimeout(rotate);
        // Restart
        startCycle(index);
      }
    };

    // Pause on hover
    if (settings.pause) {
      $this.hover(function () {
        clearTimeout(rotate);
      }, function () {
        restartCycle();
      });
    }

【讨论】：