JQuery Cycle es un excelente plugin para JQuery, que nos permite realizar slideshow de nuestras fotografias y divs fácilmente, es muy util para hacer carrusel de contenidos e imagenes, soporta muchos efectos y diferentes tipos de transiciones entre imágenes.
En el siguiente ejemplo veremos como hacer un slideshow de unas imagenes usando este plugin.
Agregamos en nuestro head el JQuery y el Plugin
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> |
Agregamos el CSS para darle algo de estilo
<style type="text/css"> .slideshow { height: 272px; width: 332px; margin: auto ; } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #FFFFFF; } </style> |
Ahora Ejecutamos el plugin cuando todo el DOM este cargado
<script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'shuffle', delay: -4000 }); }); </script> |
En nuestro BODY agregamos las imágenes que queremos mostrar
<div class="slideshow"> <img src="img/1.jpg" width="300" height="200" /> <img src="img/2.jpg" width="300" height="200" /> <img src="img/3.jpg" width="300" height="200" /> <img src="img/4.jpg" width="300" height="200" /> <img src="img/5.jpg" width="300" height="200" /> <img src="img/6.jpg" width="300" height="200" /> <img src="img/7.jpg" width="300" height="200" /> <img src="img/8.jpg" width="300" height="200" /> <img src="img/9.jpg" width="300" height="200" /> </div> |
Y listo tenemos nuestro efecto terminado, para ver el ejemplo funcionando podemos ir al siguiente link
Download JQuery Cycle