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; }

Ver varios ejemplos

Descargar plugin

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 4 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre