Plugin Cycle de JQuery

Este interesante plug-in de JQuery, que entre otros, llega para facilitar el dinamismo en nuestros sitios, es compatible con una variedad de efectos de transición y muchos más.

¿Cómo funciona?

El plug-in provee un método llamado cycle que se invoca en un elemento contenedor. Cada elemento secundario del contenedor se convierte en un "slide".

ver efectos más demos descarga

---

Uso:
1.- incluimos la librería JQuery y el plug-in

 <!-- incluimos el jQuery -->
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- incluimos plugin Cycle -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js""></script>

2.- inicializamos el plugi-in

<script type="text/javascript">
  $(document).ready(function() {
    $('#slideshow').cycle({
      fx: 'all', // carga todos los efectos permitidos 
      // en lugar de all puede usar cualesquiera de los efectos permitidos..
    });
  });
</script> 

3.- armamos nuestra galería:

<div id="slideshow">
  <img src="http://lorempixum.com/300/200" /><!-- imagenes de ejemplo-->
  <img src="http://lorempixum.com/300/200" />
  <img src="http://lorempixum.com/300/200" />
  <img src="http://lorempixum.com/300/200" />
  <img src="http://lorempixum.com/300/200" />
  <img src="http://lorempixum.com/300/200" />
</div>

---

Son muchos los efectos que podemos usar y las configuraciones que se pueden aplicar, para ver como se consiguen, solo echale una ojeada al código fuente de cada efecto.

Referencia:
jquery.malsup.com