JSFiddle - React, Tailwind, and code Playground

by thallysondias

HTML

<script src="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<div class="marquee">
    <img src="http://files.gamebanana.com/img/ico/games/banana.gif">
</div>Tentativas: <span id='display'></span>

<div class="pause">></div>
<div class="continue">||</div>

</p>
    
     <audio autoplay loop id="player">
    <source src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" type="audio/mpeg">
    <source src="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg" type="audio/ogg">
  </audio>
<div>
    <button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button>
</div>

CSS

.marquee {
    width: 300px;
    height:200px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: #ccc;
}
div.pause {
    display: none;
}
div.continue {
    display: block;
}

JavaScript

$(function () {
     var $diaplay = $('#display'),
         counter = 0;
     var $mq = $('.marquee')

         .bind('beforeStarting', function () {
         $diaplay.show().html('inicio').delay(5000).fadeOut('fast');

     })
         .bind('finished', function () {
         counter++;
         $diaplay.show().html(counter + ' falhada ').delay(1000);
     })
     //Velocidade da banana
     .marquee({
         duration: 500,
     })

     //Pause
     $('div.continue').click(function () {
         $mq.marquee('pause');
         document.querySelector("div.continue").style.display = "none";
         document.querySelector("div.pause").style.display = "block";

     });

     //Resume
     $('div.pause').click(function () {
         $mq.marquee('resume');
         document.querySelector("div.pause").style.display = "none";
         document.querySelector("div.continue").style.display = "block";
     });
      

 });