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.
2 answers
solution1
1 ACCPTED 2014-12-16 22:06:32
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);
solution2
0 2014-12-16 22:09:02
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript countdown timer to change image and link
Javascript how to change a background Image based on a timer?
Image change onclick Javascript, can I add a timer to change as well?
Button image change on a timer
change image on timer,
Change Javascript timer with CSS
Javascript Timer will not change state
URL change on a timer in JavaScript
Replace image with JavaScript on timer
jQuery background image change on timer
Related Tags