Criando um slideshow com jQuery
Enviar por email
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! 
(3 votos, média: 5 de 5)
Loading ...Posts relacionados
11 Comentários para “Criando um slideshow com jQuery”
Comentar
Anúncios Patrocinados
Assinar
Você pode inscrever seu e-mail para receber novos artigos:
Assinar através de um leitor de feeds RSS
-
Tags
- áudio
Apple
Brasil
browser
buscador
celular
Cinema
Code
conceito
Cuil
dicas
download
Download Day
downloads
Firefox
Futebol
Gadgets
Google
Humor
Internet Explorer
iPhone
Jam
jQuery
legal
Linux
Móvel
Mac
Microsoft
online
Opera
plugin
plugins
Programação
recorde
review
Toyota
tutoriais
TV Digital
Twitter
USB
vídeo
Vídeos
webcam
Windows
Wordpress
Melhor avaliados
Enquete
Loading ...
Criando um slideshow com jQuery…
Aprenda a criar um slideshow simples utilizando jQuery e o plugin jQuery Cycle Plugin….
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
Boa cara! Qualquer dúvida, só me falar!
Abraço!
Vou aplicar isso, só preciso decidir se será no tema atual ou se vou montar um novo!
Abraços.
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
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…
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….
Baixa a última…
Ou usa o arquivo que está no exemplo.
Abraço.
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
jQuery é um framework fantástico! Conseguimos criar muitos efeitos, novas funcionalidades e tudo sem o uso de flash.
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