title: Loop through images in HTML with a timer
body: <p>This is my code, it only outputs the original red image and i don't     understand how i'm supposed to make the code able to loop. Could someone help as     I need this code desperately?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;h1&gt; The traffic script&lt;/h1&gt;
  &lt;script&gt;
  
  
  var list = [
      "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/red.jpg",
      "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/amber.jpg",
      "H:/GCSE COMPUTING/a452/traffic thingy/traffic/bleh/green.jpg"
  ];
  
  var index = 0;
  
  function changeLights() {
      index = index + 1;
      if (index == list.length) index = 0;
      var image = document.getElementById('red');
      image.src=list[index];
  }
  window.onload = changelights;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;img id="red" src="H:/GCSE COMPUTING/a452/traffic     thingy/traffic/bleh/red.jpg"&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>