Slideshow com jQuery

"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.

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."

Comentários

Postagens mais visitadas