【发布时间】：2016-05-02 11:35:55
【问题描述】：
我有一个页面，我需要有 3 张图片，一张在另一张下面，我需要每 10 秒更改一次（例如：显示图像 1-3，10 秒后显示图像 4-6，之后10 秒显示图像 7-9，...，显示图像 1-3）。
现在，我有一个代码，它只更改 3 个图像中的第一个。我怎样才能让它每 10 秒后一次更改所有 3 张图像？
这是一个 javascript 示例：
<script>
var links = ["http://www.example.com","http://www.def.com","http://www.ghi.com"];
var images = ["http://www.example.com/img1.png", "http://www.example.com/img2.png",
"http://www.example.com/img3.png", "http://www.example.com/img4.png",
"http://www.example.com/img5.png", "http://www.example.com/img6.png"
];
var i = 0;
var renew = setInterval(function(){
if(links.length == i){
i = 0;
}
else {
document.getElementById("bannerImage").src = images[i];
document.getElementById("bannerLink").href = links[i];
i+=1;
}
},10000);
</script>
HTML 代码：
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img1.png" width="694" height="83" alt="some text">
</a>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img2.png" width="694" height="83" alt="some text">
</a>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img3.png" width="694" height="83" alt="some text">
</a>
------------------------------------------ -------------------------------------------------- - - - - - - - - - - - - - - - - - - - 编辑 -------------------------------------------------- -------------------------------------------------- --------------------------------
请看下面的代码。我需要这样的东西：
<head>
<title>Test</title>
<script>
var links = ["http://www.example.com","http://www.example.com","http://www.example.com"];
var images = [ "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/9/90/Contoh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg"
];
var i = 0;
var renew = setInterval(function(){
if(links.length == i){
i = 0;
}
else {
document.getElementById("bannerImage").src = images[i];
document.getElementById("bannerLink").href = links[i];
i+=1;
}
},3000);
</script>
</head>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" alt="some text">
</a></br>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" alt="some text">
</a></br>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg" alt="some text">
</a></br>
</body>
使用上面的代码，只有第一张图片发生了变化，第二张和第三张一直都是一样的，但是我也需要在 10 秒后改变它们（我需要做和我做图片一样的事情1，带有图像 2 和 3)。
【问题讨论】：
-
ID 应该是唯一的...
-
可能你只设置了一张图片（bannerImage）？正如您上面的代码所暗示的那样？
-
正如@Victoray 提到的，您必须设置唯一的 ID，如 bannerImage1、bannerImage2 等，因为 javascript 不会在同一页面上使用多个相同的 ID
标签： javascript html css image