使用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

Answer 2

或者您也可以为此添加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 3

   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
• 如果不为真，则检查ID为select-img-
• C0]的值的元素] >>
• 最后一步生成slider_i的ID。

select-img-2将永远不会到达。我不知道这是否会导致任何后续错误。

Answer 4

使用