Question

我一直试图在JavaScript中循环交通灯图像。我不知道该怎么办，有人可以提供建议。

Answer 1

对您的代码稍作修改。这是一个工作样本。

我删除了dvi.count计数器，因为它会造成更多混乱。我们需要在函数外部维护计数器。我改变了逻辑，从0开始传递数组中图像的索引。

var image = new Array("red.jpg", "redamber.jpg", "green.jpg", "amber.jpg");
var timeout;

function stopIt() {
  clearTimeout(timeout);
}

function changeimage (images, index) {
  var dvi = document.getElementById(images);
  
  if(image.length <= index)
     index = 0;

  dvi.src = image[index];
  dvi.alt = image[index];

  timeout = setTimeout('changeimage("' + images + '",' + (index + 1) + ')', 1000);
}

<body onload="changeimage('changer',0)">
  <div>
    <img src="t1" alt="test1" id="changer" />
  </div>
</body>

Answer 2

我对您的代码进行了3次更改

修正了div.count到dvi.count
更正了if语句周围的缩进和大括号（不是绝对必要，但使代码更具可读性）
将setTimeout中令人讨厌的字符串参数替换为函数引用

function changeimage(images){
    var dvi=document.getElementById(images);
    if(!dvi.count || dvi.count == image.length ){
        dvi.count=0;
    }
    dvi.src=image[dvi.count];
    dvi.alt=image[dvi.count];
    dvi.count=dvi.count+1;
    timeout=setTimeout(function(){
        changeimage(images);
    },3500);
}

实例：https://jsfiddle.net/Lofug2hf/1/

在JavaScript中循环的数组图像

2 个答案: