<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>
Como eu troco essa função onload para uma onclick de modo que ao clicar em um botão Play(input button #1)
, ele inicie a animação, e ao clicar em outro botão Pause(input button #2)
ele pare a animação, de tal forma que ao executar a função Pause
, ele pare exatamente no frame que estava sendo exibido, e que ao ser clicado no botão de Play
, ele continue exatamente a partir do frame exibido após a função Pause ter sido executada?