JavaScript中的数组图像循环

Array image looping in JavaScript

本文关键字：图像 循环 数组 JavaScript      更新时间：2023-09-26

我一直在尝试用JavaScript循环红绿灯图像。我不知道该怎么办，有人能给我建议吗。

对代码进行轻微修改。这是一个工作样品。

我删除了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>

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

  1. 修复了div.count到dvi.count的类型
  2. 更正了if语句周围的缩进和大括号（不是绝对必要的，但使代码更可读）
  3. 将您在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/

相关文章：