jQuery Cycle Plugin – Transiciones animadas de imágenes (slideshow)

jQuery Cycle plugin proporciona un mecanismo para hacer transiciones animadas de imágenes. El plugin soporta pausas al pasar el ratón por encima de la imágen, paradas automáticas, retrollamadas (callbacks) antes y después, disparadores (triggers) y una gran cantidad de efectos para las trasiciones.

La última versión estable (2.34), publicada en esta misma semana, requiere, como mínimo, la versión 1.2.3 de jQuery.

Es un plugin muy ligero, tan solo ocupa 18 KB en su versión para entornos de producción.

Como casi todo en jQuery, es muy fácil de usar. Aquí pongo un breve ejemplo básico:

HTML

1
2
3
4
5

<div id="s1" class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.pics {
    height:  232px;
    width:   232px;
    padding: 0;
    margin:  0;
} 
 
.pics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

JavaScript:

1

$('#s1').cycle('fade');

Puedes acceder a la web oficial para obtener más información, la descarga, ejemplos de códigos fuentes y ejemplos en funcionamiento desde el siguiente enlace:

jQuery Cycle Plugin.