Javascript 在一段时间后更改 div 中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17457342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript changing an image within a div after a certain amount of time
提问by Trevor Fisher
I am currently making a web page with an image inside of a div tag. I wrote a script to change the image after a certain amount of time, and it works fine when I test the script alone, however; when I attempt to place the script within my web page, it does not change the image.
我目前正在制作一个带有 div 标签内的图像的网页。我写了一个脚本来在一段时间后更改图像，但是当我单独测试脚本时它工作正常；当我尝试将脚本放置在我的网页中时，它不会更改图像。
Here is the code for my script:
这是我的脚本的代码：
<!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>
I have tested this script with the image inside of a div tag and it still works fine. When I put the same code into my web page, it does not work. Also note, the image file names are just examples. The images I am using are from photobucket, so I have very little control over what they are called. Any help I could get on this would be greatly appreciated.
我已经用 div 标签内的图像测试了这个脚本，它仍然可以正常工作。当我将相同的代码放入我的网页时，它不起作用。另请注意，图像文件名只是示例。我使用的图像来自 photobucket，所以我几乎无法控制它们的名称。我能得到的任何帮助将不胜感激。
回答by Willem Ellis
You need to put your code inside window.onload = function() {}
你需要把你的代码放在里面 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);
}
Edit
编辑
This code has been tested on my local machine and works.
这段代码已经在我的本地机器上测试过并且有效。
<!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>
Hereis a fiddle of the final code working. JSFiddle doesn't like window.onloadfor some reason, so I had to exclude it. This doesn't really demonstrate my point, but I thought I'd just include it anyway.
这是最终代码工作的小提琴。JSFiddlewindow.onload出于某种原因不喜欢，所以我不得不排除它。这并不能真正证明我的观点，但我想无论如何我都会把它包括在内。
回答by Samuel Reid
Your code works to change the image srcin this fiddle: http://jsfiddle.net/snB2a/1/
您的代码可以更改src此小提琴中的图像：http: //jsfiddle.net/snB2a/1/
回答by user2544708
Try to rename your variables images and x to longer names. What can happen is, if some other code in your page, or worse, some code in one of the script file you page references, use variable "x" without declare it locally, then it would actually modify your "x" variable.
尝试将变量 images 和 x 重命名为更长的名称。可能发生的情况是，如果您页面中的其他代码，或者更糟的是，您页面引用的脚本文件之一中的某些代码使用变量“x”而不在本地声明它，那么它实际上会修改您的“x”变量。
Here is an example to demonstrate the problem:
下面是一个演示问题的示例：
function something()
{
for (x = 0; i < 10; x++)
dosomethingelse();
}
If the above function is called in your page, then it will overwrite your "x" variable. The following code is safe:
如果在您的页面中调用了上述函数，那么它将覆盖您的“x”变量。以下代码是安全的：
function something()
{
var x;
for (x = 0; i < 10; x++)
dosomethingelse();
}
