我的html代码中有3张图片,我希望它们每5秒更改一次。为什么我的代码不起作用?PS。如果可以帮助,请不要使用jquery,因为我还没有学到。
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>
看看您的控制台,它告诉您原因。 Uncaught TypeError: Cannot set property 'src' of undefined
,表示document.mainPhoto
未定义。这不是您在JS中选择元素的方式(document.getElementById("mainPhoto")
效果更好:)
此外,您应该传递函数到setInterval
,而不是直接在函数内部调用该函数,否则您将无限次调用change()
,从而导致infinite call stack error
。
最后,您每次调用函数时都希望设置一个timeout,而不是一个间隔。超时执行一次。如果您每次都设置一个新的时间间隔,则将以指数方式堆积函数调用,从而使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, 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>