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>

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?

1

1 Resposta 1

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>

Isso vai resolver.

8
  • Obrigado, o código funcionou bem! mas como eu faço pra pausar?
    – Rick
    14/12/2015 às 22:40
  • Coloquei a parte do codigo para pausar, imagino que seja assim uma vez que não conheço o plugin de vc ta usando para rodar o video.
    – Guerra
    14/12/2015 às 22:51
  • a parte da Stopfunction não funcionou aqui, e não é bem um vídeo, mas duas imagens.
    – Rick
    14/12/2015 às 22:55
  • Na verdade supostamente ele deveria parar sozinho. Se conseguir reproduzir no jsfiddle fica mais facil de ajudar.
    – Guerra
    14/12/2015 às 22:59
  • 1
    @Rick, tomei a liberdade de fazer algumas alterações nesse jsFiddle, veja se lhe serve. Aqui o play e o pause funcionam perfeitamente. jsfiddle.net/k2Ljnrky/11 15/12/2015 às 1:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .