jQuery Cycle
El Plugin jQuery Cycle es un plugin de presentación de imágenes y contenido HTML que incorpora muchos tipos diferentes de efectos de transición. Permite añadir los efectos de pausa al hacer hover auto-stop, auto-ajuste, siguiente/anterior entre otras opciones.
El plug-in ofrece un método llamado «cycle» que se invoca en un elemento contenedor. Cada elemento secundario del contenedor se convierte en un «slide».
En los ejemplos que vamos a ilustrar vamos a ver varios efectos de transición pero hay muchos más y otras opciones interesantes.
Para incorporar este estupendo pasador de imágenes tan solo deberás descargar el plugin e incorporarlo en el <head> de vuestra página junto con la librería jQuery y su llamada. Por ejemplo:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').cycle({
fx: 'fade'
});
});
</script>
Y en el <body> el contenido HTML:
<div id="demo1" class="slideshow"> <img src="images/cod.jpg" width="480" height="140" /> <img src="images/halo.jpg" width="480" height="140" /> <img src="images/mortal.jpg" width="480" height="140" /> <img src="images/portal.jpg" width="480" height="140" /> </div>
Y finalmente tan solo faltará añadir algunos estilos:
.slideshow { height: 172px; width: 512px; margin: auto; margin-bottom:15px; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
Autor
¿Buscas trabajo de programador?
87 artículos que te podrían interesar
Deja una respuesta