我目前正在制作一个网页，其中的 div 标签内包含图像。我编写了一个脚本来在一段时间后更改图像，但是当我单独测试该脚本时它工作得很好；当我尝试将脚本放入网页中时，它不会更改图像。
这是我的脚本的代码:
<!DOCTYPE html>
<html>
<body>
<script>
images = new Array;
images[0] = "img2.gif";
images[1] = "img3.gif";
images[2] = "img4.gif";
images[3] = "img5.gif";
images[4] = "img6.gif";
images[5] = "img7.gif";
images[6] = "img8.gif";
images[7] = "img9.gif";
images[8] = "img10.gif";
setInterval( function() {
changeImage()
}, 5000);
x = 0;
function changeImage() {
document.getElementById('ad').src = images[x];
if ( x < 8 ) {
x += 1;
} else if ( x = 9 ) {
x = 0;
}
}
</script>
<img id='ad' src="img.gif">
</body>
</html>
我已经用 div 标签内的图像测试了这个脚本，它仍然工作正常。当我将相同的代码放入我的网页时，它不起作用。另请注意，图像文件名只是示例。我使用的图像来自 photobucket，所以我几乎无法控制它们的名称。如果我能得到任何帮助，我将不胜感激。
最佳答案
您需要将代码放入window.onload = function() {}
var images = new Array();
images[0] = "img2.gif";
images[1] = "img3.gif";
images[2] = "img4.gif";
images[3] = "img5.gif";
images[4] = "img6.gif";
images[5] = "img7.gif";
images[6] = "img8.gif";
images[7] = "img9.gif";
images[8] = "img10.gif";
function changeImage() {
document.getElementById('ad').src = images[x];
if (x<8) {
x+=1;
}
else if (x===9) {
x=0;
}
}
window.onload = function() {
var x = 0;
setInterval(function() {
changeImage()
},5000);
}
编辑
此代码已在我的本地计算机上经过测试并且可以工作。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var images = new Array();
for (var i = 2; i < 11; i++) {
images.push("img" + i + ".gif");
}
var x = 0;
function changeImage() {
document.getElementById('ad').src = images[x];
document.getElementById('imgsrc').innerHTML = "<h1>" + images[x] + "</h1>";
if (x < 8) {
x += 1;
} else {
x = 0;
}
}
window.onload = function() {
setInterval(function () {
changeImage();
}, 1000);
}
</script>
</head>
<body>
<img id="ad" src="img.gif" />
<div id="imgsrc"><h1>img.gif</h1></div>
</body>
</html>
Here是最终代码工作的一个 fiddle 。由于某种原因，JSFiddle 不喜欢 window.onload，所以我不得不排除它。这并没有真正证明我的观点，但我想无论如何我都会把它包括在内。
关于Javascript 在一定时间后更改 div 内的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17457342/