Menu
I'm trying to make a banner that cycles through 3 images using JavaScript.
Each image should be displayed for 10 seconds before changing.
I wrote some code but it is not working. It stays stuck on the first image. The Image does not change as I want it to.
Can you see anything in the code and point out my mistakes?
Code as follows:
<script type="text/javascript">
function changeBanner(){
var img = new array
img[0] = document.images[0].src
img[1] = document.images[1].src
img[2] = document.images[2].src
var currentimg = img[0]
if(currentimg == img[0]) {
currentimg = img[1]
}
if(currentimg == img[1]) {
currentimg = img[2]
}
}
</script>
HTML as follows:
<body onload="var start=setInterval('changeBanner()', 10000;">
<div id="wrapper">
<div>
<img src="budda.JPG" width="900px" height="300px" />
</div>
...
208
var index = 0;
function changeBanner() {
[].forEach.call(document.images, function(v, i) {
document.images[i].hidden = i !== index
});
index = (index + 1) % document.images.length;
}
window.onload = function() {
setInterval(changeBanner, 1000)
};
http://jsbin.com/emilef/2/edit
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
