Criar um slideshow de imagens "no braço" não é fácil, mas com JQuery e uma mãozinha do JCycle tudo fica muito fácil vejamos como:
Primeiramente devemos fazer o download das bibliotecas JQuery e JCycle:
JQuery => http://jquery.com/
JCycle => http://jquery.malsup.com/cycle/
Salve os arquivos na raiz do site ou em algum diretório de scripts do site.
Importe as bibliotecas e insira estes códigos entre as tags <HEAD> do site assim:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//#slides é o id da DIV que carregará as imagens
$('#slides').cycle({
//Fade é o efeito de transição das imagens
fx: 'fade',
//É a velocidade do efeito
speed: 1000,
timeout: 7000,
//#thumbs é o id do DIV que carregará os thumbnails
pager: '#thumbs',
//É para parar a transição no evento onmouseover
pause:true,
// Esta parte cria pega as imagens carregadas no #slides e cria o thumbnails
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children().eq(0).attr("src");
return '<a href="#"><img src="'+ img +'" width="45px" height="35px" border="0"/></a>';
}
});
});
</script>
Agora no corpo da página é só criar as DIVS e carregar as imagens assim:
<div id="slides" width="400px" height="400px">
<img src="imagem1.jpg" width="398px" height="398px"/>
<img src="imagem2.jpg" width="398px" height="398px"/>
<img src="imagem3.jpg" width="398px" height="398px"/>
<img src="imagem4.jpg" width="398px" height="398px"/>
</div>
<div id="thumbs"></div>
Lembre-se de não alterar os IDs das divs, senão será necessário alterar o código javascript.
Caso queira aplicar alguma regra CSS utilize classes assim: Exemplo: <div id="slides" class="div_slide">
Com um pouco de imaginação dá para melhorar muito este exemplo, mas ainda sim espero que ajude alguém.
Assinar:
Postar comentários (Atom)
Nenhum comentário:
Postar um comentário