JavaScript图像数组循环
[英]JavaScript image array loop
问题描述
I'm doing my exams at school and the main question of my computer science test is to make a traffic light, that loops through different colours using arrays. 
我正在学校里考试，我的计算机科学考试的主要问题是制作一个交通信号灯，该信号灯使用阵列循环通过不同的颜色。 I'm currently stuck on this question, and I think I'm pretty close to solving it. 我目前仍停留在这个问题上，我想我已经很接近解决这个问题了。 Here's my code. 这是我的代码。
<!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>
When I run this the loop seems to be working, as it loops through the different names of each image. 当我运行此循环时，循环似乎正在工作，因为它循环遍历每个图像的不同名称。 At the top of my page for example, red.jpg will come up as words, then change to the words orange.jpg, and so on. 例如，在我页面的顶部，red.jpg将作为单词出现，然后更改为orange.jpg单词，依此类推。 Because of this I feel like there is some sort of problem with the way I've used images. 因此，我觉得我使用图像的方式存在某种问题。 I have my html saved in the same place with all my images. 我将我的HTML文件与所有图像保存在同一位置。 I'm only 14 and haven't been programming for long, so even though it's probably a fairly simple solution, this just hurts my brain...any help would be appreciated! 我只有14岁，并且没有从事很长时间的编程工作，所以即使这可能是一个非常简单的解决方案，但这也伤了我的脑筋……任何帮助将不胜感激！
4 个解决方案
解决方案1
0 2016-01-29 17:39:42
Try to use an <img> tag: 尝试使用<img>标签：
<img id="myLight"></img>
and set the src : 并设置src ：
document.getElementById("myLight").src= myPics[i];
Your code can be similar to this: 您的代码可以与此类似：
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;
})();
解决方案2
0 2016-01-29 17:44:44
You can do it like this 你可以这样
function loop() {
if(i > (totalPics - 1)){
i = 0;
}
var imgUrl = myPics[i];
myLight.innerHTML = '<img src="'+imgUrl+'" />';
i++;
loopTimer = setTimeout('loop()',3000);
}
So you will insert image into your div#myLight 因此，您将图像插入div#myLight
解决方案3
0 2016-01-29 17:51:30
Change 'loop()' to loop (it's not a string, its a function) and myLight.innerHtml to myLight.src 将“ loop（）”更改为循环（这不是字符串，而是一个函数），并将myLight.innerHtml更改为myLight.src
Here is a jsfiddle: https://jsfiddle.net/222bq9Lt/ 这是一个jsfiddle： https ://jsfiddle.net/222bq9Lt/
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();
解决方案4
0 2016-01-29 18:01:11
Okay guys, I've managed to get a solution thanks to all of your help. 好的，谢谢您的帮助，我已经设法找到了解决方案。 I used the image tag, and also used the image url instead of using the name I saved the image as on my computer. 我使用了图像标签，并且还使用了图像URL，而不是使用将图像保存在计算机上的名称。 I changed 'loop()' to loop, and also changed 'myLight.innerHTML' to 'myLight.src'.Thank you to everyone who helped! 我将'loop（）'更改为循环，也将'myLight.innerHTML'更改为'myLight.src'。感谢所有提供帮助的人！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.