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