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>

@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
– villecoder, Commented Feb 10, 2016 at 19:14

Steve B · Accepted Answer · 2016-02-10 19:18:27Z

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, 2016 at 19:18

Steve B

2121 silver badge8 bronze badges

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

Comments

K.Dawn · Accepted Answer · 2016-02-10 19:17:27Z

0

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>

answered Feb 10, 2016 at 19:17

K.Dawn

11 bronze badge

1 Comment

villecoder Over a year ago

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.

Collectives™ on Stack Overflow

Images that can loop on array

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related