Javascript 例如，如何每5秒更改一个图像？

我的HTML代码中有三个图像，我希望它们每五秒钟更改一次。为什么我的代码不起作用

var-images=[]；
图像[0]=['photoFromInternet']；
图片[1]=['photoFromInternet2']；
图片[2]=['photoFromInternet3']；
var指数=0；
函数更改（）{
document.mainPhoto.src=图像[索引]；
如果（索引==2）{
指数=0；
}否则{
索引++；
}
setInterval（change（），1000）；
}
window.onload=change（）
看看你的控制台，它会告诉你为什么<代码>未捕获类型错误：无法设置未定义的属性“src”

，这意味着

文档。mainPhoto

未定义。这不是在JS中选择元素的方式（

document.getElementById（“mainPhoto”）

效果更好：）

另外，您应该将函数传递给

setInterval

，不要直接在其内部调用该函数，否则您将无限调用

change（）

，这将导致

无限调用堆栈错误

另外，如果您想要5秒，那么您想要通过5000，而不是1000（毫秒）

最后，您希望在每次调用函数时设置超时，而不是间隔。超时执行一次。如果每次都设置一个新的时间间隔，那么函数调用就会成倍增加，很快就会使页面无法响应，从而使CPU无法正常工作


var-images=[]；
图像[0]=['photoFromInternet']；
图片[1]=['photoFromInternet2']；
图片[2]=['photoFromInternet3']；
var指数=0；
函数更改（）{
document.getElementById（“mainPhoto”）.src=images[index]；
如果（索引==2）{
指数=0；
}否则{
索引++；
}
设置超时（更改，5000）；
}
window.onload=change（）
看看你的控制台，它会告诉你为什么<代码>未捕获类型错误：无法设置未定义的属性“src”
，这意味着
文档。mainPhoto
未定义。这不是在JS中选择元素的方式（
document.getElementById（“mainPhoto”）
效果更好：）

另外，您应该将函数传递给
setInterval
，不要直接在其内部调用该函数，否则您将无限调用
change（）
，这将导致
无限调用堆栈错误

另外，如果您想要5秒，那么您想要通过5000，而不是1000（毫秒）

最后，您希望在每次调用函数时设置超时，而不是间隔。超时执行一次。如果每次都设置一个新的时间间隔，那么函数调用就会成倍增加，很快就会使页面无法响应，从而使CPU无法正常工作


var-images=[]；
图像[0]=['photoFromInternet']；
图片[1]=['photoFromInternet2']；
图片[2]=['photoFromInternet3']；
var指数=0；
函数更改（）{
document.getElementById（“mainPhoto”）.src=images[index]；
如果（索引==2）{
指数=0；
}否则{
索引++；
}
设置超时（更改，5000）；
}
window.onload=change（）
您应该在func之外运行'change'函数，并将函数名传递给setInterval func，如下所示

let images = ['photoFromInternet', 'photoFromInternet2', 'photoFromInternet3'];

let index = 0;
const imgElement = document.querySelector('#mainPhoto');

function change() {
   imgElement.src = images[index];
   index > 1 ? index = 0 : index++;
}

window.onload = function () {
    setInterval(change, 5000);
};

您应该在func之外运行'change'函数，并将函数名传递给setInterval func，如下所示

let images = ['photoFromInternet', 'photoFromInternet2', 'photoFromInternet3'];

let index = 0;
const imgElement = document.querySelector('#mainPhoto');

function change() {
   imgElement.src = images[index];
   index > 1 ? index = 0 : index++;
}

window.onload = function () {
    setInterval(change, 5000);
};

谢谢你，伙计。还可以告诉我您在这里做了什么吗“const imgElement=document.querySelector（'#mainPhoto'）”？这是查找dom元素的查询选择器。在本例中，它试图获取图像标记元素。与“document.getElementById（）相同”，非常感谢。还可以告诉我您在这里做了什么吗“const imgElement=document.querySelector（'#mainPhoto'）”？这是查找dom元素的查询选择器。在本例中，它试图获取图像标记元素。与“document.getElementById（）”相同。非常感谢您对其进行更多的解释。非常感谢您对其进行更多的解释。