Play and Pause button in image animation using Javascript in HTML

Question

Play and Pause button in image animation using Javascript in HTML

Navigation

#1 by (1 votes)

1

<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>

As I change this onload function to an onclick so that when I click on a Play(input button #1) button, it starts the animation, and when I click on another button Pause(input button #2) it stops the animation, in such a way that when executing the function Pause , it stops exactly in the frame that was being displayed, and that when the Play button is clicked, it continues exactly from the frame displayed after the Pause function has been executed?

javascript html

asked by anonymous 14.12.2015 / 23:24

1 answer

How to bring the fields name and type from an oracle table in C # Is it possible to know where a sql execution originated from SQL SERVER?

score 1 · 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>

This will solve.