Quantcast
Channel: Nexxuz.com » plugin
Viewing all articles
Browse latest Browse all 6

JQuery Cycle: Plugin para realizar slideshow de imagenes o Divs

$
0
0

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

Pagina Oficial Del Plugin

Quizás también le interese:


Viewing all articles
Browse latest Browse all 6

Trending Articles