Images that can loop on array

Question

I just was wondering what a code that could loop an array of images may look like. I have an example but cannot see why it does not work:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" language="JavaScript">
    var i =0;
    var trafficarray=["1.gif","2.gif","3.gif","4.gif"];
    var image = document.getElementById("trafficlights");

    function cycle(){
      i+=1;
      document.getElementById("trafficlights").src=trafficarray[i];
      if (i>2) {i=-1};
    }
  </script>
</head>

<body>
  <img src="1.gif" id="trafficlights">
  <button onClick="setInterval(cycle,1000)">click me</button>
</body>

[Use a recursive function together with `setTimeout()`](http://stackoverflow.com/questions/16887061/javascript-recursive-timeout-call) — Blazemonger, Feb 10 '16 at 19:13
@Shashank The document initializes with 1.gif being shown. The function that changes the images is only invoked after the user clicks on the button. — villecoder, Feb 10 '16 at 19:14

score 2 · Answer 1 · answered Feb 10 '16 at 19:18

2

Your code does work. Perhaps you mean that the images are not loading. In this case, make sure "1.gif" and the rest of the files exist in the same directory that your webpage is served on, otherwise you may see broken links.

answered Feb 10 '16 at 19:18

Steve B

212
1
8

score 0 · Answer 2 · answered Feb 10 '16 at 19:17

Never mind all! I have fixed it:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" language="JavaScript">
var i =0;
var trafficarray=["1.gif","2.gif","3.gif","4.gif"];
var image = document.getElementById("trafficlights");

function cycle()
{
i+=1;
document.getElementById("trafficlights").src=trafficarray[i]
if (i>2) {i=-1};
}
</script>
</head>

<body>

<img src="1.gif" id="trafficlights">
<button onClick="setInterval(cycle,1000)">click me</button>
</body>
</html>

Or alternatively:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" language="JavaScript">
var i =0;
var trafficarray=["1.gif","2.gif","3.gif","4.gif"];
var image = document.getElementById("trafficlights");

function cycle()
{
i+=1;
document.getElementById("trafficlights").src=trafficarray[i]
if (i>2) {i=-1};
}
</script>
</head>

<body>

<img src="1.gif" id="trafficlights">
<button onClick="cycle()">click me</button>
</body>
</html>

I'm not sure I get it. What did you fix? Your first code is the same thing you posted in your question. And the second code just makes it change on click instead of on a timer. — villecoder, Feb 10 '16 at 19:20

Images that can loop on array

2 Answers2