通过Javascript将手动交通灯转换为自动交通灯_Javascript_Loops

通过Javascript将手动交通灯转换为自动交通灯

javascript loops

通过Javascript将手动交通灯转换为自动交通灯,javascript,loops,Javascript,Loops,我正在尝试做一个交通灯序列，在没有用户输入的情况下自动定时运行。我现在已经让代码正常工作了，但它只运行了一次，然后就停止了，那么我如何才能更改它，使它继续运行呢？这是我的密码： <!DOCTYPE html> <html> <head> <script> var images = new Array() images[0] = "image2.jpg"; images[1] = "image3.jpg"; images[2] = "image4.j

我正在尝试做一个交通灯序列，在没有用户输入的情况下自动定时运行。我现在已经让代码正常工作了，但它只运行了一次，然后就停止了，那么我如何才能更改它，使它继续运行呢？这是我的密码：

<!DOCTYPE html>
<html>
<head>
<script>
var images = new Array()
images[0] = "image2.jpg";
images[1] = "image3.jpg";
images[2] = "image4.jpg";
setInterval("changeImage()", 3000);
var x=0;

function changeImage()
{
document.getElementById("img").src=images[x]
x++;
}
</script>
</head>
<body>
<img id="img" src="image1.jpg">
</body>
</html>


var images=新数组（）
图像[0]=“image2.jpg”；
图像[1]=“image3.jpg”；
图像[2]=“image4.jpg”；
setInterval（“changeImage（）”，3000）；
var x=0；
函数changeImage（）
{
document.getElementById（“img”）.src=images[x]
x++；
}

要使其自动化，您可以将其放入循环中，也可以使用

var interval=setInterval（nextLightClick，1500）
这将无限循环，每1500毫秒（1.5秒）运行一次函数。如果你想阻止它，你可以简单地说：
clearInterval（间隔）
这里有一个例子——请注意，我正在更改innerHTML，而不是src，并且我正在使用div而不是image，但是逻辑将完全相同

var-tlight=新数组（“1green.jpg”、“2yellow.jpg”、“3red.jpg”）；
var指数=0；
var tlightLen=tlight.length；
var image=document.getElementById（'firstlight'）；
image.innerHTML=tlight[index]；
var区间；
函数startInterval（）{
间隔=设置间隔（下一次单击鼠标右键，1500）；
}
函数stopInterval（）{
间隔时间；
}
函数nextLightClick（）{
索引++；
如果（索引==tlightLen）
指数=0；
image.innerHTML=tlight[index]；
}


开始
停止
@tomkenny检查我编辑的答案中的演示，查看它的实际效果