Play and Pause button in image animation using Javascript in HTML

Question

<style type='text/css'>
    #animation img{
        display: none;
    }
    #animation img:first-child{
        display: block;
    }
</style>
<script type='text/javascript'>
    //<![CDATA[
    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);
        stop;
    }
    //]]>
</script>
<div id="animation">
    <img src="cyanblue.png"/>
    <img src="canvas2.png"/>
</div>

How do I change this onload function to an onclick so that by clicking a button Play(input button #1), it starts animation, and by clicking another button Pause(input button #2) it stops the animation in such a way that when performing the function Pause, it stops exactly on the frame that was being displayed, and that while being clicked on the button Play, it continues exactly from the frame displayed after the Pause function has been run?

Answer 1

<style type='text/css'>
    #animation img{
        display: none;
    }
    #animation img:first-child{
        display: block;
    }
</style>
<script type='text/javascript'>
    //<![CDATA[
     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); 
        stop;           
    }       
    //]]>
</script>
<div id="animation">
    <img src="cyanblue.png"/>
    <img src="canvas2.png"/>
</div>
<button onclick="startAnimation()">Clique aqui!</button>

That will solve.