例如，如何每 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>