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