自動播放CSS3幻燈片

Question

我修改了一個預先設計的幻燈片，我發現here，我想對其進行編輯，以便在用戶不必點擊箭頭的情況下進行自動播放。不過，我不確定如何做到這一點。你能用jQuery模擬點擊嗎？這是做這件事的最好方法嗎？

Answer 1

這是我提出的解決方案。它獲得當前的幻燈片並每3.5秒進步一次。這適用於4張幻燈片，而不是本教程中顯示的5張幻燈片。我的腳本還包含到達最後一張幻燈片並循環回到第一張幻燈片，以及如果用戶自行推進幻燈片，則從最新的幻燈片前進。

每張幻燈片看起來像這樣...

<input value="0" type="radio" id="button-1" name="controls" checked="checked"/> 

...與檢查=在當前幻燈片 「檢查」。每張幻燈片的值爲0，1，2，3，...，n。

<script type="text/javascript"> 
     var tmp = 0; 
     $(document).ready(
      function() { 
       tmp = parseInt($('input[name=controls]:checked').val()); 
       var tid = setInterval(advance, 3500); 
      } 
     ); 

     function advance() { 
      if(tmp == 3) { 
       $('input[name=controls]:eq(0)').attr('checked', 'checked'); 
       tmp = 0; 
      } 
      else { 
       $('input[name=controls]:eq(' + (tmp+1) + ')').attr('checked', 'checked'); 
       tmp = parseInt($('input[name=controls]:checked').val()); 
      } 
     } 

     function abortTimer() { clearInterval(tid); } 
    </script> 

Answer 2

他說他正在使用單選按鈕的checked屬性。

我用無線電輸入按鈕和它們的標籤與：檢查僞 類來控制滑動圖像。因此，如果您從一個圖像 更改爲另一個瀏覽器不會在瀏覽器歷史記錄 （如在其他CSS幻燈片）中創建一個步驟。

有樂趣我的滑塊:)

所以你也可以創建與jQuery一個循環，通過複選框的陣列去。您可以使用checkbox selector獲得一組複選框，並通過使用checked選擇器找到當前選中的單選按鈕來迭代當前選中哪個單選按鈕。