Criando um slideshow com jQuery
Tags: dicas, jQuery, slideshow, tutoriais
(4 votos, média: 5,00 de 5)
Loading ...
Imprimir este post
Quem visita o techlive.org pode ver que existe um slideshow, logo no topo da página principal, onde são exibidos os artigos em destaque. Já fui questionado várias vezes sobre como obter aquele efeito. É muito simples: utilizando o plugin jQuery Cycle Plugin.
Este plugin fornece um método cycle que é chamado em um recipiente. Cada objeto filho desse recipiente se torna um slide.
Como criar o slide
Antes de tudo, baixe o plugin. Depois insira a chamada da jQuery e do plugin na sua página:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cycle.js"></script>
Crie uma div com ID pai. Dentro dessa div, coloque os filhos com a classe filho:
<div id="nav"> <span><a class="previous" href="#">Anterior</a></span> <span class="numbers"></span> <span><a class="next" href="#">Próximo</a></span> </div> <div id="pai"> <div class="filho"><img src="img1.jpg"/></div> <div class="filho"><img src="img2.jpg"/></div> <div class="filho"><img src="img3.jpg"/></div> <div class="filho"><img src="img4.jpg"/></div> <div class="filho"><img src="img5.jpg"/></div> </div>
O script que irá chamar a função cycle:
$(function() {
$('#pai').show(); //exibe a div pai
$('#pai').cycle({
fx: 'fade',
timeout: 6000,
speed: 500,
next: '.next',
prev: '.previous',
pager: '.numbers'
});
});
O CSS:
#pai {
display:none;
}
E pronto! Agora é só adaptar à sua necessidade. Utilizando um pouco de PHP e CSS você consegue um slide de notícias como o utilizado aqui no techlive.org.
Veja o exemplo em funcionamento aqui, ou faça download.
Espero que tenham gostado, até a próxima! 
12 Comments
Dezão on agosto 9th, 2008
Falae!
Putz, antes mesmo de eu perguntar você já postou sobre isso 
Vou implementar no novo tema do Blog do Dezão
Abraços!
Último post de Dezão: Bichinho de estimação
Rick on agosto 9th, 2008
Vou aplicar isso, só preciso decidir se será no tema atual ou se vou montar um novo!
Abraços.
Erick on agosto 14th, 2008
Amigo… gostei muito, mas como eu faria para ter também uma legenda que ele puxe do alt ou do title? só falta isto para ficar perfeito…
seria legal também thumbnails no lugar dos números
Lenon on agosto 14th, 2008
Você não precisa puxar do title, pode colocar texto dentro das divs filho que vai funcionar.
E quanto aos números, é só você modificar o plugin…
andre luis on agosto 24th, 2008
oh lenon,valeu pela informação,mas nesse endereço que passou ae tem algumas versões do pluguim qual devo baixar cara por favor….
Vilson Carlos on setembro 1st, 2008
Cara que jóia este slide show, e é muito prático, com jquery descubri muitas coisas que antes só em flash poderia ser feito, e agora com jquery os sites estão cada vez mais leves.
Abraço
Lenon on setembro 2nd, 2008
jQuery é um framework fantástico! Conseguimos criar muitos efeitos, novas funcionalidades e tudo sem o uso de flash.
Glauber Bandeira on setembro 4th, 2008
Estou planejando mudar a plataforma o nome do meu blog, e logo quando fizer eu tbm vou colocar um slideshow do jquery em meu blog, axo muito bom, facil e pratico para os queridos leitores verem os destaques do blog rapidamento.
Veleu Lenon vc eh 10.
Último post de Glauber Bandeira: As roubadas da internet segundo o Acidez Mental
Fabrício on novembro 25th, 2008
Não conseguir visualizar nem baixar o exemplo.
lenon no diHITT on agosto 8th, 2008
Criando um slideshow com jQuery…
Aprenda a criar um slideshow simples utilizando jQuery e o plugin jQuery Cycle Plugin….