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).
For now on, I have a code, which changes only the first from the 3 images. How could I make it so it just change all of the 3 images at once, after every 10 seconds?
Here's a javascript sample:
<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 :
<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).
