Neste artigo vamos aprender a desenvolver um Slideshow de
imagens com a utilização do jQuery que pode ser aplicado em diversos
lugares devido a sua simplicidade. Esse tutorial foi criado
originalmente por Jon Raasch. Inclusive é ele que uso aqui no meu site para mostrar meu portifólio.
Repare na simplicidade do HTML:
<div id="slideshow">
<img class="active" src="images/image1.jpg" alt="" title="" />
<img src="images/image2.jpg" alt="" title="" />
<img src="images/image3.jpg" alt="" title="" />
<img src="images/image4.jpg" alt="" title="" />
</div>Basicamente você irá precisar de uma div, e dentro da mesma é onde
você irá colocar as imagens para as transições, coloque quantas desejar.
Somente adicione a classe active a primeira imagem.
Algumas considerações também devem ser feitas no CSS para que ele
funcione corretamente, elas serão listadas abaixo:
#slideshow {
position:relative;
height:376px;
width:490px;
margin:0 auto;
}
#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}Na div #slideshow é onde você deve definir a altura e a largura do box
que irá conter as imagens. Se as imagens tiverem o mesmo tamanho, seu
slideshow ficará mais elegante. Agora, o JavaScript, que como podem ver,
também é muito simples:
function slideSwitch() {
var $active = $('#slideshow img.active');
$active.addClass('last-active');
// verifica se existe um próximo objeto na div #slideshow, caso ele nao exista, retorna para o primeiro
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
// Codigo que define as transicoes entre as imagens
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
//Executa a função a cada 5 segundos
setInterval( "slideSwitch()", 5000 );
});Vejam agora o exemplo do Slideshow.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?