使用Java每隔几秒钟更改HTML页面中的图像
[英]Change image in HTML page every few seconds using Javascript
问题描述
I have a page where I need to have 3 images, one below another, and I need to change them every 10 seconds (for example: images 1-3 are displayed, after 10 seconds images 4-6 are displayed, after 10 seconds images 7-9 are displayed, ..., images 1-3 are displayed). 
我有一个页面，在该页面上我需要3张图像，一张下面一张，我需要每10秒更改一次（例如：显示图像1-3，在显示10秒后显示图像4-6，在显示10秒后，显示7-9，...显示图像1-3）。
For now on, I have a code, which changes only the first from the 3 images. 现在，我有一个代码，仅更改了3张图片中的第一张。 How could I make it so it just change all of the 3 images at once, after every 10 seconds? 我怎样才能做到，这样每10秒就可以一次更改所有3张图像？
Here's a javascript sample: 这是一个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 code : 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>
------------------------------------------------------------------------------------------------------------------------------------EDIT ------------------------------------------------------------------------------------------------------------------------------------ -------------------------------------------------- -------------------------------------------------- --------------------------------编辑----------------- -------------------------------------------------- -------------------------------------------------- ---------------
Please, take a look at the code below. 请看下面的代码。 I need something like this: 我需要这样的东西：
<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>
With the above code, only the first image changes, the second and the third are the same all the time, but I need to change them too after very 10 seconds (I need to do the same thing as I did with image 1, with images 2 and 3). 使用上面的代码，只有第一个图像更改，第二个和第三个图像始终保持不变，但是我也需要在10秒后更改它们（我需要执行与图像1相同的操作，图片2和3）。
3 个解决方案
解决方案1
2 已采纳 2016-05-02 12:07:59
This version has links as well. 这个版本也有链接。 Try this JS FIDDLE 试试这个JS FIDDLE
<a id='bannerLink1' href="#"><img src="" id='img1' ></a>
<a id='bannerLink2' href="#"><img src="" id='img2' ></a>
<a id='bannerLink3' href="#"><img src="" id='img3' ></a>
<script>
var images = ["http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG1&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG2&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG3&w=327&h=420",
"http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG4&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG5&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG6&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG7&w=327&h=420"
];
var links = ["http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG1&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG2&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG3&w=327&h=420",
"http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG4&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG5&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG6&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG7&w=327&h=420"
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("bannerLink1").href=links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("bannerLink2").href=links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("bannerLink3").href=links[i+2];
i+=3;
},1000);
</script>
解决方案2
1 2016-05-02 11:54:21
I have set 3 seconds interval and alert to display different image changes so please have a look, may be this will help you 我已设置3秒间隔并提醒显示不同的图像更改，所以请看一下，可能会对您有所帮助
<head>
<title>Test</title>
<script>
var images = ["img1.png","img2.png","img3.png"];
function changeImage()
{
var i = 0;
var inter = setInterval(function(){
if(i < images.length)
{
//document.getElementById("bannerImage").src = images[i];
alert(images[i]);
i++;
}
else
{
i = 0;
//document.getElementById("bannerImage").src = images[i];
alert(images[i]);
i++;
}
},3000);
}
</script>
</head>
<body onload="changeImage()">
</body>
解决方案3
0 2016-05-02 11:38:44
setInterval(function(){
functions here.
}, 10000);
More info here: http://www.w3schools.com/jsref/met_win_setinterval.asp 此处提供更多信息： http : //www.w3schools.com/jsref/met_win_setinterval.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.