Javascript Change Image on Timer

Question

I'm trying to rotate a set of 6 images in javascript, not jquery. The first image shows up, but the rest of them don't rotate. Here's my code:

<html>
<head>
<script type="text/javascript">
function rotatePic() {

var qutAd = document.getElementById("yumOreos");
var imgs = ["images/img1.png", "images/img2.png", "images/img3.png", "images/img4.png", "images/img5.png", "images/img6.png"];
var ad = 0;

qutAd.src = imgs[ad];

setInterval(function () {ad++;if (ad == imgs.length) {ad = 0;}}, 4000);
}  

</script>
</head>
<body onload="rotatePic()">
     <img id="yumOreos">
</body>
</html>

What am I doing wrong? Thanks.

SeinopSys · Accepted Answer · 2014-12-16 22:06:32Z

1

You have to set the src in the interval function as well.

setInterval(function () {
    ad++;
    if (ad == imgs.length) ad = 0;
    qutAd.src = imgs[ad];
}, 4000);

answered Dec 16, 2014 at 22:06

SeinopSys

8,93810 gold badges67 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AngularLover · Accepted Answer · 2014-12-16 22:09:02Z

0

You have forgotten to change the index of the array, to change the source. So you can do this

setInterval(function () {if (ad == imgs.length) {ad = 0;} qutAd.src =imgs[ad++]}, 4000);
}

answered Dec 16, 2014 at 22:09

AngularLover

3741 silver badge12 bronze badges

Collectives™ on Stack Overflow

Javascript Change Image on Timer

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related