Aquí hay un control deslizante jQuery simple, y voy a iniciarlo haciendo clic en el botón Play durante la configuración del interval = setInterval(updateDiv,1000); Intervalo para cambiar las diapositivas cada 1 segundo, y estoy borrando Intervalo (pausa deslizante) por clearInterval(interval); a través del botón de Pause .
Pero el problema es que me enfrento a que si el usuario hace clic varias veces en el botón de reproducción, la animación del control deslizante se vuelve loca al cambiar las diapositivas y luego también clearInterval(interval); función no funciona. Por qué ?
¿Puedo saber la solución?
MI CÓDIGO COMPLETO ES:
var interval; var interval = false; $("#slideshow > div:gt(0)").hide(); function updateDiv() { $('#slideshow > div:first') .fadeOut(600) .next() .fadeIn(400) .end() .appendTo('#slideshow'); } $(".play").click(function() { interval = setInterval(updateDiv, 1000); }); $(".pause").click(function() { clearInterval(interval); }); #slideshow { margin: 80px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } #slideshow>div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } #slideshow2 { margin: 80px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); margin-left: 200px; } #slideshow2>div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> ------ <button class="play">play</button> <button class="pause">pause</button> ------- <div id="slideshow"> <div> <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"> </div> <div> Pretty cool eh? This slide is proof the content can be anything. </div> </div>Cada vez que el usuario hace clic en ".play" se crea otro setInterval, y la variable de interval solo contiene el último. Por lo tanto, si ya hay un intervalo, debe borrarlo o evitar que el usuario comience de nuevo.
Esta es una solución de trabajo:
var interval; var interval = false; $("#slideshow > div:gt(0)").hide(); function updateDiv() { $('#slideshow > div:first') .fadeOut(600) .next() .fadeIn(400) .end() .appendTo('#slideshow'); } $(".play").click(function() { if(!interval){ interval = setInterval(updateDiv, 1000); } }); $(".pause").click(function() { clearInterval(interval); interval = false; }); #slideshow { margin: 80px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } #slideshow>div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } #slideshow2 { margin: 80px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); margin-left: 200px; } #slideshow2>div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> ------ <button class="play">play</button> <button class="pause">pause</button> ------- <div id="slideshow"> <div> <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"> </div> <div> Pretty cool eh? This slide is proof the content can be anything. </div> </div>