title: Play images in JavaScript
body: <p>I want to make the image animation using JavaScript with some controllable functionality, such as play, pause and stop, the following is so far I've tried:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Image Player&lt;/title&gt;
      &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;
          window.onload=function () {
              var rotator=document.getElementById(&quot;slideshow_content&quot;);
              var images=rotator.getElementsByTagName(&quot;img&quot;);
              for (var i=1; i&lt;images.length; i++) {
                  images[i].style.display=&quot;none&quot;;
              }
              var counter=1;
              setInterval(function () {
                  for (var i=0; i&lt;images.length; i++) {
                      images[i].style.display=&quot;none&quot;;
                  }
                  images[counter].style.display=&quot;block&quot;;
                  counter++;
                  if (counter==images.length) {
                      counter=0;
                  }
              }, 3000);
  
              function playimage() {
                  player.play();
              }
  
              function pauseimage() {
                  player.pause();
              }
  
              function stopimage() {
                  player.pause();
                  player.currentTime=0;
  
              }
          };
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;slideshow&quot;&gt;
          &lt;div id=&quot;slideshow_content&quot; width=&quot;200px&quot; height=&quot;200px&quot; 
              style=&quot;padding-top: 10px; padding-bottom: 10px;&quot;&gt;
              &lt;img alt=&quot;&quot; src=&quot;a.jpg&quot; /&gt;
              &lt;img alt=&quot;&quot; src=&quot;b.jpg&quot; /&gt;
              &lt;img alt=&quot;&quot; src=&quot;c.jpg&quot; /&gt;
              &lt;img alt=&quot;&quot; src=&quot;d.jpg&quot; /&gt;
              &lt;img alt=&quot;&quot; src=&quot;e.jpg&quot; /&gt;
              &lt;img alt=&quot;&quot; src=&quot;f.jpg&quot; /&gt;
          &lt;/div&gt;
          &lt;button onclick=&quot;playimage()&quot;&gt;
              Play&lt;/button&gt;&lt;br /&gt;
          &lt;button onclick=&quot;pauseimage()&quot;&gt;
              Pause&lt;/button&gt;&lt;br /&gt;
          &lt;button onclick=&quot;stopimage()&quot;&gt;
              Stop&lt;/button&gt;&lt;br /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>But it doesn't work as expected, when I click on <kbd>start</kbd> button it doesn't not show me any image ..</p>
  <p>How can I make it work, as when I click on the <kbd>start</kbd> button and the images could be played; when I click on <kbd>stop</kbd> and it could stop .. ?</p>
  <p>What I'm doing wrong and where is the problem?</p>