title: How to show just one image at a time at a set interval?
body: <p>I have created a javascript function which takes two images from div style and displays it one picture first and the other picture after the specified time. </p>
  
  <p>JavaScript</p>
  
  <pre><code>var imageID = 0;
  function changeImage (every_seconds) {
      if (!imageID) {
          document.getElementById("myimage1");
          imageID++;
      }
      if (imageID == 1) {
          document.getElementById("myimage2");
      }
  }
  //call same function again for x of seconds
  setTimeout("changeImage(" + every_seconds + ")", ((every_seconds) * 50000000000));
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body style='background:black;' onload='changeimage(10)'&gt;
      &lt;div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='left'&gt;
          &lt;img width='600px' height='500px' id='myimage1' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/&gt;
      &lt;/div&gt;
      &lt;div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='right'&gt;
          &lt;img width='600px' height='500px' id='myimage2' src='http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg'/&gt;                                                              
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Please can someone help how to get just a single image at a time and disappear the other one at the specified interval.</p>