Transição de imagens com Cycle jQuery

Olá amigos,

já faz um tempo que não posto nada aqui, bem, resolvi reativar o blog passando algumas dicas e tutoriais bem simples e de fácil implementação e modificação.

Hoje vou mostrar um efeito muito legal em jQuery, muito utilizado em Slideshows e galeria de imagens, é a transição com o plugin Cycle.

vamos lá

Primeiramente vamos acrescentar em nosso código a biblioteca jQuery, adicione a seguinte linha acima da tag no topo da página:

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

Abaixo dele vamos acrescentar o plugin cycle, você pode fazer o download dele clicando aqui

2

<script type="text/javascript" src="../../js/cycle.js" ></script>

Agora vamos montar nossa lista de imagens a serem exibidas conforme o código abaixo:

1
2
3
4
5

<ul id="roda">
  <li><img src="01.jpg" alt="" /></li>
  <li><img src="02.jpg" alt="" /></li>
  <li><img src="03.jpg" alt="" /></li>
</ul>

Eu dei uma identificação “roda” para a lista, isso é importante para o código jQuery identificar onde será realizado o efeito.

Agora vamos completar nosso código com o jQuery. Na parte de cima da página, logo abaixo do plugin cycle, entre com o seguinte código:

3
4
5
6
7
8

<script type="text/javascript">  
    $(document).ready(function() {  
        $('ul#roda').cycle({  
        });  
    });  
</script>

Esse código é o que vai fazer a transição de imagens acontecer.

O plugin cycle permite alguns efeitos diferentes, você pode incrementar o código para conseguir novas formas de transições e velocidade das mesmas.

Em um exemplo pratico e rápido, eu inclui apenas 2 linhas ao código, substitua o codigo acima por este:

3
4
5
6
7
8
9
10

<script type="text/javascript">  
    $(document).ready(function() {  
        $('ul#roda').cycle({  
            fx:'shuffle',  
            speed: 1000  
        });  
    });  
</script>

Aqui eu acrescentei 2 linhas, a linha “fx:’shuffle’” que muda o efeito de transição das imagens e a linha “speed:1000″ que muda a velocidade desta transição.

Eu disponibilizei um exemplo do efeito aqui

Para saber mais sobre este plugin, acesse o site oficial aqui

Qualquer dúvida é só deixar um comentário abaixo, ok?
Um abraço a todos.

Nenhum post relacionado.