Question

我一直在尝试编写一个自动循环图像的红绿灯序列。但是，我有一个自动更改的小问题。你能帮我解决我的错误吗？

var images = ["red.png",
"redamber.png",
"orange.png",
"green.png"];
setTimeout("changelight()",1000);
var index = 0;

function changeImage()
{
document.getElementById("img").src= images[0];
}

Answer 1

Please check the Fiddle

试试这个

var index = 0;
function changeImage()
{
if (index > 3) index = 0;
document.getElementById("img").src= images[index];
index++;
}

var images = ["red.png",
"redamber.png",
"orange.png",
"green.png"];
setInterval(changeImage,1000);

Answer 2

你们大部分都在那里，但有几件小事。

首先，您正在调用名为changeLight的函数，但该函数名为changeImage。您还需要将图像源属性更改为images[index]，然后每次都增加该值。

行index = (index + 1) % 4;为索引添加1，但只允许它高达3.如果它达到4，那么最后的% 4会将其设置为0。

供参考，请参阅the remainder description on this page

您还使用了只运行一次的setTimeout。如果您使用setInterval，它的工作方式完全相同，但会重复。

var images = ["red.png",
    "redamber.png",
    "orange.png",
    "green.png"];

setInterval(changeLight, 1000);

var index = 0;

function changeLight() {
    document.getElementById("img").src = images[index];
    index = (index + 1) % 4;
}

可能存在问题的另一个问题是我不知道您的图片是否确实具有img的ID。如果没有，那么你需要添加它。

Answer 3

你可能打算 document.getElementById("img").src= images[的索引 ];

确保索引已更新

Answer 4

你做了一些典型的初学者错误：

您的.div1 { position: absolute; border: 3px solid #73AD21; } .div_1 { top: 50%; left: 50% } ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } li { position: relative; display: inline-block; } .img_1 { text-align: center; } span.s1, span.s2, span.s3, span.s4 { position: absolute; z-index: 1; left: 0px; top: 35%; width: 100%; }与function name无关。
您可能需要the one in the timer而不是interval。
您必须使用single timeout按标签选择DOM。
要完成querySelector，您必须使用变量array并结合increment支票。

请阅读文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

if

示例：https://jsfiddle.net/27jygopz/

Answer 5

var images = ["red.png", "redamber.png", "orange.png", "green.png"];
setTimeout("changelight()",1000);
var index = 0;

function changeImage()
{
    index = (index + 1) % 4;
    document.getElementById("img").src= images[index];
}

如何自动更改图像src

5 个答案: