Question

我使用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);
      }
    };

任何纠正代码的帮助都将非常感激。谢谢！

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

对脚本所做的更改摘要：

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

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

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

2 个答案: