Javascript 按下按钮后在整个阵列中循环_Javascript_Html_Arrays

Javascript 按下按钮后在整个阵列中循环

javascript html arrays

Javascript 按下按钮后在整个阵列中循环,javascript,html,arrays,Javascript,Html,Arrays,为了总结我目前的工作，我制作了一个非常基本的程序，当按下按钮时，移动到交通灯的下一部分（红色开始，按下后变为琥珀色等），因为交通灯的每个图像都存储在一个数组中。这确实可以按预期工作，但我现在需要更改此代码，以便在按下按钮时，而不仅仅是进入阵列中的下一个对象，它会在所有这些对象之间循环一段时间，模拟红绿灯。我一辈子都找不到从哪里开始，我尝试过的一切（setTimeout，setInterval）都没有达到预期效果这是我的代码（没有任何添加/更改）：改变交通灯换灯变量列表=[ “红绿灯

为了总结我目前的工作，我制作了一个非常基本的程序，当按下按钮时，移动到交通灯的下一部分（红色开始，按下后变为琥珀色等），因为交通灯的每个图像都存储在一个数组中。这确实可以按预期工作，但我现在需要更改此代码，以便在按下按钮时，而不仅仅是进入阵列中的下一个对象，它会在所有这些对象之间循环一段时间，模拟红绿灯。我一辈子都找不到从哪里开始，我尝试过的一切（

setTimeout

，

setInterval

）都没有达到预期效果

这是我的代码（没有任何添加/更改）：


改变交通灯

换灯

变量列表=[
“红绿灯，jpg”，
“交通灯琥珀色.jpg”，
“绿灯.jpg”
];
var指数=0；
函数changeLights（）{
指数=指数+1；
if（index==list.length）
指数=0；
var image=document.getElementById（'light'）；
image.src=list[index]；
}

像这样的东西

//灯光图像数组：
变量列表=[
“红绿灯，jpg”，
“交通灯琥珀色.jpg”，
“绿灯.jpg”
];
//计数器以跟踪显示的图像
var指数=0；
//获取DOM引用：
var btnStart=document.getElementById（“btnChange”）；
var image=document.getElementById（'light'）；
//用于跟踪计时器的变量
var定时器=null；
//按钮的连线单击事件：
btnStart.addEventListener（“单击”，更改灯光）；
函数changeLights（）{
//只有在我们没有循环通过所有测试的情况下才能继续
//数组中的项是否已存在
如果（索引<列表长度-1）{
//在约1.5秒内再次调用此函数
定时器=设置超时（变更灯，1500）；
}
//更改图像源和备用文本
image.src=列表[索引]；
image.alt=列表[索引]；
index++；//提升索引
}

改变交通灯

换灯

是的，这是我一直在寻找的，但是有没有办法让它在阵列中旋转一圈后自动停止，而不是停止循环的按钮？

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%">Changing Traffic Lights</h1>
<p> 
<button type="button" onclick="changeLights()">Change Lights</button>
</p>

<img id="light" src="traffic-light-red.jpg">

<script>
var list = [
    "traffic-light-red.jpg",
    "traffic-light-amber.jpg",
    "traffic-light-green.jpg"
];

var index = 0;

function changeLights() {
    index = index + 1;      
    if (index == list.length) 
    index = 0;      
    var image = document.getElementById('light');     
    image.src=list[index];
}

</script>

</body>
</html>