CSS no Lanche

Nesse tutorial vamos aprender a desenvolver um simples 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 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.