Una de las mejoras más solicitadas sobre los tutoriales presentados en este sitio, cuando se trata de presentaciones de diapositivas, es la capacidad de hacer que las diapositivas avancen automáticamente. En realidad, no es tan difícil lograr este efecto, y para demostrarlo, en este breve tutorial vamos a hacer que nuestra presentación de diapositivas HTML5 avance automáticamente con unas pocas líneas de jQuery.
La idea
Como nuestra presentación de diapositivas ya tiene flechas anterior / siguiente, podemos hacer que una función de JavaScript se ejecute periódicamente y "hacer clic" en la flecha siguiente para nosotros. Con jQuery podemos simular fácilmente cualquier evento en cualquier elemento con la ayuda del trigger() método así:
$('#nextArrow').bind('click',function(){
alert("Clicked!");
});
$('#nextArrow').trigger('click');
// or alternatively:
// $('#nextArrow').click();
El fragmento anterior activará todos los controladores para el evento de clic y generará el mensaje de alerta. En el caso de la presentación de diapositivas, no nos importa lo que sucede detrás de escena ni cómo funciona la animación, solo simulamos un clic con el mouse. Esto significa que también podríamos tener el script de avance automático como un archivo externo separado.
Combinado con setTimeout() función de JavaScript tenemos todas las herramientas necesarias para hacer nuestra transición de diapositivas automáticamente entre las diapositivas.
La implementación
Teniendo en cuenta lo anterior, aquí está el código de avance automático completo.
autoadvance.js
$(window).load(function(){
// The window.load event guarantees that
// all the images are loaded before the
// auto-advance begins.
var timeOut = null;
$('#slideshow .arrow').click(function(e,simulated){
// The simulated parameter is set by the
// trigger method.
if(!simulated){
// A real click occured. Cancel the
// auto advance animation.
clearTimeout(timeOut);
}
});
// A self executing named function expression:
(function autoAdvance(){
// Simulating a click on the next arrow.
$('#slideshow .next').trigger('click',[true]);
// Schedulling a time out in 5 seconds.
timeOut = setTimeout(autoAdvance,5000);
})();
});
Observe que estamos pasando un parámetro de matriz al método de activación en la línea 28. El elemento de esta matriz está disponible para nosotros como simulado parámetro en la línea 9. Esto nos ayuda a distinguir los clics falsos de los reales. Si ocurre uno real, detenemos el avance automático borrando el tiempo de espera.
Para concluir
Para usar este script solo necesita reemplazar los selectores por el siguiente flecha en la línea 28 y para ambas flechas en la línea 9. Con estas modificaciones, podrá usar este fragmento para automatizar cualquier presentación de diapositivas (o cualquier tipo de presentación) en su sitio con solo incluir autoadvance.js con una etiqueta de secuencia de comandos.