Images that can loop on array
<p>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:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script type="text/javascript" language="JavaScript"&gt;
    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&gt;2) {i=-1};
    }
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;img src="1.gif" id="trafficlights"&gt;
  &lt;button onClick="setInterval(cycle,1000)"&gt;click me&lt;/button&gt;
&lt;/body&gt;
</code></pre>

<p></p>