JavaScript图像数组循环_Javascript_Arrays

JavaScript图像数组循环

javascript arrays

JavaScript图像数组循环,javascript,arrays,Javascript,Arrays,我在学校考试，计算机科学考试的主要问题是制作一个红绿灯，它使用阵列在不同颜色之间循环。我现在被这个问题困住了，我想我很快就能解决它了。这是我的密码 <!DOCTYPE html> <html> <head> <style> #myLight { background-image:url(blank.png); width:230px; height:220px; } </style> </head> <body>

我在学校考试，计算机科学考试的主要问题是制作一个红绿灯，它使用阵列在不同颜色之间循环。我现在被这个问题困住了，我想我很快就能解决它了。这是我的密码

<!DOCTYPE html>
<html>
<head>
<style>
#myLight {
background-image:url(blank.png);
width:230px;
height:220px;
}
</style>
</head>
<body>
<div id="myLight"></div>
<script>
var myTraffic = document.getElementById('myLight');
var myPics = ['red.jpg','orange.jpg','green.jpg'];
var totalPics = myPics.length;
var i = 0;
function loop() {
if(i > (totalPics - 1)){
    i = 0;
}
myLight.innerHTML = myPics[i];
i++;
loopTimer = setTimeout('loop()',3000);
}
loop();
</script>
</body>
</html>


#myLight{
背景图片：url（blank.png）；
宽度：230px；
高度：220px；
}
var myTraffic=document.getElementById（'myLight'）；
var myPics=['red.jpg'，'orange.jpg'，'green.jpg']；
var totalPics=myPics.length；
var i=0；
函数循环（）{
如果（i>（totalPics-1））{
i=0；
}
myLight.innerHTML=myPics[i]；
i++；
loopTimer=setTimeout（'loop（）'，3000）；
}
loop（）；

当我运行这个循环时，它似乎在工作，因为它在每个图像的不同名称中循环。例如，在我的页面顶部，red.jpg将显示为单词，然后更改为单词orange.jpg，依此类推。正因为如此，我觉得我使用图像的方式有点问题。我把我的html和我所有的图片保存在同一个地方。我只有14岁，还没有编程很长时间，所以即使这可能是一个相当简单的解决方案，这只会伤害我的大脑…任何帮助将不胜感激

尝试使用

标记：

您的代码可以类似于此：

document.getElementById("myLight").src= myPics[i];

你可以这样做

var trafficLight = document.getElementById('myLight');
var pictures = ['red.jpg','orange.jpg','green.jpg'];

var i = 0;
var l = pictures.length - 1;

(function loop() {
  if (i > l){
    i = 0;
  }
  trafficLight.src = pictures[i];
  loopTimer = setTimeout(loop, 3000);
  ++i;
})();

函数循环（）{
如果（i>（totalPics-1））{
i=0；
}
var imgUrl=myPics[i]；
myLight.innerHTML=''；
i++；
loopTimer=setTimeout（'loop（）'，3000）；
}

因此，您将在

div#myLight

中插入图像，将“loop（）”更改为loop（它不是字符串，而是函数），并将myLight.innerHtml更改为myLight.src

下面是一个JSFIDLE：

好了，伙计们，多亏了你们的帮助，我终于找到了解决办法。我使用了图像标签，还使用了图像url，而不是使用我在计算机上保存图像的名称。我将“loop（）”更改为loop，并将“myLight.innerHTML”更改为“myLight.src”。感谢所有帮助过我的人

您不想使用

元素吗？

var trafficLight = document.getElementById('myLight');
var pictures = ['red.jpg','orange.jpg','green.jpg'];

var i = 0;
var l = pictures.length - 1;

(function loop() {
  if (i > l){
    i = 0;
  }
  trafficLight.src = pictures[i];
  loopTimer = setTimeout(loop, 3000);
  ++i;
})();

function loop() {
    if(i > (totalPics - 1)){
        i = 0;
    }
    var imgUrl = myPics[i];
    myLight.innerHTML = '<img src="'+imgUrl+'" />';
    i++;
    loopTimer = setTimeout('loop()',3000);
}

var myTraffic = document.getElementById('myLight');
    var myPics = ['http://www.colorcombos.com/images/colors/FF0000.png','http://www.colorcombos.com/images/colors/FFCC00.png','https://s.graphiq.com/sites/default/files/2307/media/images/Bright_Green_429748_i0.png'];
    var i = 0;
    function loop() {
    if(i > (myPics.length - 1)){
        i = 0;
    }
    myLight.src = myPics[i];
    i++;
    loopTimer = setTimeout(loop ,3000);
    }
    loop();