在javascript中以時間間隔切換選中的復選框

Question

我是 javascript 的完全菜鳥，目前在項目中遇到問題。

我正在嘗試制作帶有特定過渡的圖片幻燈片。 幻燈片建立在過渡的標簽上（復選框）。 我嘗試制作一個腳本，每 5 秒更改一次復選框。

我已經從朋友那里得到了很多幫助，但我根本無法讓它發揮作用。

這是腳本：

   var slider_i = 1; 
   function slider_change(){
      if(++slider_i > 4){
         slider_i=1;
      } 
      document.getElementById('select-img-'+slider_i).checked = true;         
      setTimeout(slider_change, 5000);
   } 
   slider_change();

這是我正在談論的滑塊： http : //demo.br-photography.ch/Portal/transitions/index_3.html

我做了一個 jsfiddle，更容易測試原因然后我們可以看到沒有 css 屬性的復選框是否實際切換。 他們這樣做了，但是我在測試站點上的幻燈片沒有按應有的方式切換圖像......？

https://jsfiddle.net/t4eapmgb/

Answer 1

嘗試：

   var slider_i = 0;    // !!!
   var slider_change = function (){
      if(++slider_i > 4){
         slider_i=0;
      } 
      document.getElementById('select-img-'+slider_i).checked = true;         
      setTimeout(slider_change, 50000);
   };
   slider_change();

或者

   var slider_i = 1;    
   var slider_change = function (){
      if(slider_i++ > 3){ // !!!
         slider_i=1;
      } 
      document.getElementById('select-img-'+slider_i).checked = true;         
      setTimeout(slider_change, 50000);
   };
   slider_change();

您的代碼實際發生了什么：

• slider_i設置為 1。
• 函數slider_change被調用
• 它首先遞增slider_i因為++slider_i
• 現在slider_i的值為2
• 它現在檢查<4
• 如果不是 true，它會檢查一個 id 為 select-img-< slider_i值 > 的slider_i

最后一步生成select-img-2的 id。

select-img-1永遠不會到達。 我不知道這是否會導致任何后續錯誤。

Answer 2

供您參考， setTimeout(, 50000) 在 50000 ms = 50sec 后觸發。 如果你想等待 5 秒你必須寫 setTimeout(, 5000)

Answer 3

只需將腳本從上到下放置。 由於初始頁面加載時元素（復選框）不可用，因此存在引用錯誤。

或者你也可以為這個問題添加 try catch 塊，如下所示：

替換這個

var slider_i = 1; 
function slider_change(){
 if(++slider_i > 4){
   slider_i=1;
 } 
 document.getElementById('select-img-'+slider_i).checked = true;         
 setTimeout(slider_change, 5000);
} 
slider_change();

有了這個：-

var slider_i = 1; 
function slider_change(){
  if(++slider_i > 4){
    slider_i=1;
  } 
  try{
    document.getElementById('select-img-'+slider_i).checked = true;         
  }catch(err){}
  setTimeout(slider_change, 5000);
} 
slider_change();

Answer 4

用

//Repeats forever
var variable = setInterval(functionYouWantToCall, 5000);
//Cancel the interval
clearInterval(variable);