title: How to define number of cycles in animated Image with Javascript
body: <p>I have this snipped made by <a href="https://stackoverflow.com/a/9487083/4642215">gilly3</a> (special thanks).
  Is there any possibility to define and apply the desired number of cycles? As we can see, the code will repeat the sequences.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>onload = function startAnimation() { 
      var frames = document.getElementById("animation").children;
      var frameCount = frames.length;
      var i = 0;
      setInterval(function () { 
          frames[i % frameCount].style.display = "none";
          frames[++i % frameCount].style.display = "block";
      }, 100); 
  } </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#animation img {
      display: none;
  }
  #animation img:first-child {
      display: block;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="animation"&gt; 
      &lt;img src="https://40.media.tumblr.com/fd2e0116f31a0fcdc8f3531dcaaa90dc/tumblr_o0w5avLZFM1rpy0r6o1_540.jpg" /&gt;
      &lt;img src="https://41.media.tumblr.com/13699ab5ac456da7712fae015ba3a7a5/tumblr_np0yulyrtz1tn6jt3o1_540.jpg" /&gt;
      &lt;img src="https://41.media.tumblr.com/6f0cea1195cfd37d468dcd51cb8ca5be/tumblr_nz0hywwevQ1s0x1p3o1_r2_540.jpg" /&gt;
      &lt;img src="https://40.media.tumblr.com/cfa4f49cfcd79b0afa997d9fb746d93e/tumblr_o0kwteTCVD1qzqavpo1_540.jpg" /&gt;
      &lt;img src="https://40.media.tumblr.com/81b9d21f1b15584cd75be63e3388aa15/tumblr_ni0eqtik0P1qgwfzao1_540.jpg" /&gt;
      &lt;img src="https://36.media.tumblr.com/605ce3769d8ca286454f1355749aead2/tumblr_ntx88hD8rP1spnyg9o1_500.jpg" /&gt;
      &lt;img src="https://40.media.tumblr.com/125a40e474d2d4a8eea6e0a28e24df83/tumblr_o11pefcs5m1sh1x48o1_540.jpg" /&gt;
      &lt;img src="https://41.media.tumblr.com/bb8ab516d0495bfc35e2413611472daa/tumblr_nycp9fWVTc1qcr6iqo1_540.jpg" /&gt;
  
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>I have to recognise that I've received a sugestion:
  <em>"<code>setInterval</code> returns an interval id. Store that id in a variable and, when you want to stop the animation, pass the id to <code>clearInterval()</code>"</em> but it will be much appreciated a code update (I don't know how to write this in <code>js</code>).</p>