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

Question

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

 var images = []; images[0] = ['photoFromInternet']; images[1] = ['photoFromInternet2']; images[2] = ['photoFromInternet3']; var index = 0; function change() { document.mainPhoto.src = images[index]; if (index == 2) { index = 0; } else { index++; } setInterval(change(), 1000); } window.onload = change();

 <div class="lastMain"> <a href="www.comingsoon.com" id="slider"> <img id="mainPhoto"> <div class="mainSlider"> <img src="photoFromInternet1" style="display: none"> <img src="photoFromInternet2*" style="display: none"> <img src="photoFromInternet3" style="display: none"> </div> </a> </div>

PS如果你能帮忙，请不要使用jquery，因为我还没有学会。

Answer 1

您应该在函数之外运行“更改”function 并将 function 名称传递给 setInterval 函数，如下所示

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);
};

Answer 2

看看你的控制台，它会告诉你为什么。 Uncaught TypeError: Cannot set property 'src' of undefined ，这意味着document.mainPhoto未定义。 这不是你 select JS 中的一个元素的方式（ document.getElementById("mainPhoto")效果更好:)

此外，您应该将 function 传递给setInterval ，而不是直接在其中调用 function ，否则您将无限调用change() ，这会导致infinite call stack error 。

此外，如果你想要 5 秒，你想要传递 5000，而不是 1000（毫秒）。

最后，您要在每次调用 function 时设置超时，而不是间隔。 超时执行一次。 如果您每次都设置一个新的时间间隔，您将会以指数方式堆积 function 调用，从而通过压倒 CPU 迅速使您的页面无响应。

 var images = []; images[0] = ['photoFromInternet']; images[1] = ['photoFromInternet2']; images[2] = ['photoFromInternet3']; var index = 0; function change() { document.getElementById("mainPhoto").src = images[index]; if (index == 2) { index = 0; } else { index++; } setTimeout(change, 5000); } window.onload = change();

 <div class="lastMain"> <a href="www.comingsoon.com" id="slider"> <img id="mainPhoto"> <div class="mainSlider"> <img src="photoFromInternet1" style="display: none"> <img src="photoFromInternet2*" style="display: none"> <img src="photoFromInternet3" style="display: none"> </div> </a> </div>