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

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

摘要脚本所做的更改：

1. 添加含有desiredTimeouts线。
2. 更改setInterval至setTimeout。
3. 在功能末尾添加startCycle的呼叫。
4. 改变的clearInterval两个实例clearTimeout
5. 制造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(); 
     }); 
    }