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

Question

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

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

我想为每个图像幻灯片分配不同的超时。例如:

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

我怎样才能获得它？是否可以？非常感谢您的帮助，并对我糟糕的英语表示歉意。

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

我尝试按照您的建议更改代码。我没有 JavaScript 代码经验，所以我做错了一些事情， slider 不再工作，所以我恢复到旧版本。这是我修改代码的方法:

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

任何纠正代码的帮助将不胜感激。谢谢!

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

脚本更改摘要:

1. 添加一行，其中包含 desiredTimeouts .
2. 已更改 setInterval至setTimeout .
3. 添加调用 startCycle在函数末尾。
4. 更改了 clearInterval 的两个实例至clearTimeout
5. 制造index作为 startCycle 的参数调用.