在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
• 如果不是，则检查具有id select-img-＆lt; value of slider_i＆gt;
的元素

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

永远不会达到

select-img-1。我不知道这是否会导致任何后续错误。

Answer 2

有关您的信息，在50000 ms = 50秒后触发setTimeout（，50000）。 如果你想等待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);