title: changing images automatically with javascript
body: <p>I have the current JavaScript problem. I have four divisions next to each other on my website that constantly rotate images on a 10 seconds interval. I need these intervals to keep rotating images at the current interval but start 5 seconds apart from each other in order to obtain a nice waterfall effect. How can I accomplish this using JavaScript? </p>
  
  <p><a href="http://i.stack.imgur.com/gMY5s.png" rel="nofollow">image of how it looks on my websites' header</a></p>
  
  <p>This is an example of the code I am currently using to display a single division and handle the rotation of the images.</p>
  
  <pre><code>&lt;div class = "TestRotator"&gt;
  &lt;img src="http://bushveld.info/wp-content/uploads/2013/07/image1.png" alt="rotating" width="100" height="232" id="rotator"&gt;
  &lt;script type="text/javascript"&gt;
  (function () {
      var rotator = document.getElementById('rotator'); // change to match image ID
      var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';
      var delayInSeconds = 5;
      // set number of seconds delay
      // list image names
      var images = ['image2.png', 'image3.png', 'image4.png'];
      var num = 0;
      var changeImage = function () {
          var len = images.length;
          rotator.src = imageDir + images[num++];
          if (num == len) {
              num = 0;
          }
      };
      setInterval(changeImage, delayInSeconds * 1000);
  })();
  &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>