title: change to next image automatically
body: <p>I have the following code used for displaying several images changed on hover, but i also would like to add a feature that changes the image automatically if i dont do it manually. 
          
  
  <pre><code>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;&lt;br /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;  
  &lt;p&gt;
    &lt;script type="text/javascript" language="javascript"&gt;
      function changeImage(img){
         document.getElementById('bigImage').src=img;
  
      }
    &lt;/script&gt;
  
    &lt;img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage"    
  /&gt;
  &lt;p&gt;&amp;nbsp; &lt;/p&gt;
  &lt;div&gt;
    &lt;p&gt;
    &lt;img src="../Pictures/lightcircle2.png" height="79" width="78" 
  
  onmouseover="changeImage('../Pictures/lightcircle2.png')"/&gt;
  
   &lt;/p&gt;
   &lt;p&gt;&lt;img src="../Pictures/lightcircle.png" alt="" width="120" height="100" 
  
  onmouseover="changeImage('../Pictures/lightcircle.png')"/&gt;&lt;/p&gt;
  
   &lt;p&gt;&lt;img src="../Pictures/lightcircle2.png" alt="" width="78" height="79"    
  
  onmouseover="changeImage('../Pictures/lightcircle2.png')"/&gt;&lt;/p&gt;
  
   &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  
   &lt;/br&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What i want to do is automatically change the images displayed using javascript preferrably. How can i do that?</p>