Hay un control deslizante jQuery simple, pero cuando salgo del navegador Chrome y aparece después de un tiempo, este cambio de control deslizante se desliza rápidamente para completar todos los movimientos pendientes cuando estaba en un estado no visible.
Ahora quiero que este control deslizante esté en pausa cuando salga del estado visible, y debe ser un inicio rápido cuando vuelva a esto.
significa que creo que necesito configurar un clearInterval(interval); función, que leí aquí: jQuery cuando el elemento se vuelve visible
Pero no sé qué debo cambiar en mi código.
Por favor, dame una respuesta.:
TODO MI CÓDIGO ESTÁ AQUÍ:
$('#slider').each(function() { let currentPosition = 0; //Set the starting position of the photo let photo = $('.photo'); let photoNums = photo.length; //Number of photos let speed = 400; let timeout = 2000; // How long does each photo stay $('.photo').eq(0).show(); function move(){ // Change the number of sheets displayed through the concept of remainder let nextPhoto = (currentPosition + 1) % photoNums; photo.eq(currentPosition).fadeOut(speed); photo.eq(nextPhoto).fadeIn(speed); currentPosition = nextPhoto; } setInterval(move,timeout); }) #slider { width: 600px; height: 300px; position: relative; margin: auto; } img { width: 100%; } .photo { position: absolute; display: none; } <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <div id="slider"> <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=1" alt=""></div> <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=2" alt=""></div> <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=3" alt=""></div> <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=4" alt=""></div> </div>Creo que es mejor usar setTimeOut en lugar de setInterval. Y ralentiza el movimiento de cada foto.
$('#slider').each(function() { let currentPosition = 0; //Set the starting position of the photo let photo = $('.photo'); let photoNums = photo.length; //Number of photos let speed = 800; let timeout = 2000; // How long does each photo stay $('.photo').eq(0).show(); function move(){ // Change the number of sheets displayed through the concept of remainder let nextPhoto = (currentPosition + 1) % photoNums; photo.eq(currentPosition).fadeOut(speed); photo.eq(nextPhoto).fadeIn(speed); currentPosition = nextPhoto; setTimeout(move,speed) } move() })