Para empezar, nuestro objetivo es mantener el HTML lo más limpio posible:
<div id="slideshow">
<img src="img/img1.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img3.jpg" alt="">
</div>
Primero usaremos CSS para posicionar las imágenes y “apilarlas” colocando la primera (la que tiene la clase “active”) en lo alto de la pila gracias a la propiedad z-index:
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
Como las hemos dado posición “absolute” (para poder ponerlas todas en el mismo lugar) necesitamos definir la altura del DIV del slideshow. Fijaros que hemos establecido 3 distintos z-index los cuales manipularemos después usando jQuery.
Para la animación vamos a cambiar de una foto a otra sucesivamente. Así que primero escribimos una función que traiga una nueva foto encima de la ultima imagen activa:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
aquí hemos establecido un intervalo en Javascript para llamar a la función slideSwitch() cada 5 segundos. Entonces slideSwitch() aplica la clase CSS “active” para traer la siguietne foto a lo alto de la pila. Como seleccionaremos las imágenes mas de una vez en slideSwitch(), hemos definido las variables $active y $next
Lo siguiente es incorporar un elegante fundido para pasar de una foto a la siguiente.
function slideSwitch() {
var $active = $('#slideshow IMG.active');
var $next = $active.next();
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
Comenzamos aplicando la clase “last-active” que definimos antes. Como “last-active” va detrás de “active” en la hoja de estilos, el z-index de 9 toam prioridad y la imagen que estaba en lo alto cae un nivel. Después establecemos la opacidad (opacity) de la nueva imagen a 0 para que podamos fundirla usando la función animate() . Finalmente añadimos una llamada para quitar la clase de la imagen previa cuando la animación se complete.
Aunque nuestra galería así como está ya funciona bien, deberíamos hacerla más robusta construyendo algunas variables por defecto. Primero definimos una imagen activa por defecto. También definiremos valores por defecto para el bucle de la animación.
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
Primero vamos a definir una imagen por defecto para la variable $active, que curiosamente tiene que ser la última imagen en la pila. Esto se debe a que a través de la posición absoluta, la última imagen se sitúa encima de todas las demás, y tenemos que empezar con él si queremos evitar cualquier parpadeo.
Para el bucle es bastante simple: todo lo que tenemos que hacer es apuntar la variable $next a la primera imagen una vez que ha llegado al final de la línea.
Nota: no es obligatorio usarlo con elementos con la etiqueta IMG, tambien se puede usar con otras etiquetas como DIV, lo que nos proporciona la flexibilidad necesaria para incluir (por ejemnplo) anotaciones a las fotos o enlaces.
Fuente: http://jonraasch.com/blog/a-simple-jquery-slideshow
Comentarios