title: Simple JavaScript image rotator
body: <p>I have a simple image rotator on a website consisting of 4 images that have to appear for a few seconds before showing the next one. It seems to work on its first cycle but then when it gets back to the first image it doesn't show that one but works again from the second image and so on always missing that image on every cycle. 
  The function is called using onLoad EH in the body. In the body there is an img  with my first image inside it. I'm a noob so please be gentle if I've missed anything out.
  Here's what I have...</p>
  
  <pre><code>&lt;body onLoad="sunSlideShow()"&gt;
  
      &lt;img src="IMAGES/slider1.gif" alt="slide-show" id="mySlider" width="900"&gt;
  
  &lt;body&gt;
  
  
  
  
  var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif");
  
  var i = 0
  
  
  function sunSlideShow()
  {
      document.getElementById("mySlider").src = ( "IMAGES/" + quotes[i] );
  
      if (i&lt;4)
      {
          i++;
      }
  
      else
  
          i = 1;
  
      setTimeout("sunSlideShow()", 3000);
  
  }
  sunSlideShow()
  </code></pre>