Devido ao pedido do amigo Thiago Finardi vou fazer um post sobre o plugin do jQuery Cycle, mais para apresentar do que para explicar como ele funciona, pois como veremos ele é muito simples e prático.

Então o Cycle é um plugin para jQuery para utilizar o efeito de slideshow fornecendo uma série bem interessante de efeitos de troca. Parando com a enrolação vamos aos exemplos.

Primeiramente não se esqueça de inserir o arquivo javascript da jQuery e da Cycle que você baixa aqui que oferece dois arquivos. O normal com todos os efeitos o Lite com basicamente somente o efeito de fade(que convenhamos é o mais utilizado). 

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>


<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $('#fade').cycle();
});
</script>
<div id="fade">
    <img src="img/foto1.jpg"/>
    <img src="img/foto2.jpg"/>
    <img src="img/foto3.jpg"/>
</div>

Como vemos nos códigos acima, o plugin adiciona o método cycle para ser adicionado a uma marcação de div por exemplo que deverá conter dentro dele os elementos que irão ser trocados, no exemplo utilizamos elementos img, mas pode ser utilizado outros elementos HTML.

Se não passarmos nenhum valor para o método cycle ele utilizará o efeito fade, se quisermos utilizar outro efeito basta passar o nome do efeito para a propriedade fx como vemos no exemplo abaixo: 

$('#slide').cycle({ 
    fx: 'scrollDown' 
});

Segue a lista de efeitos disponíveis

Além da propriedade fx, também podemos utilizar outras propriedades por exemplo:

  • speed: define o numero de milissegundos que vai levar a transição para o próximo slide
  • timeout: especifica quantos milissegundos levará para iniciar o próxima transição
  • prev: recebe o id do elemento que quando clicado irá ir para a imagem anterior
  • next: recebe o id do elemento que quando clicado irá para a próxima image 
$('#slide').cycle({ 
    fx:      'scrollDown', 
    speed:    300, 
    timeout:  2000 
    prev: '#link_anterior'
    next: '#link_proximo'
});

Mais propriedades podem ser vistas na página de opções.

Espero que gostem e utilizem!