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. Inclusive é ele que uso aqui no meu site para mostrar meu portifólio.
Repare na simplicidade do HTML:
<div id="slideshow"><br /> <img class="active" src="images/image1.jpg" alt="" title="" /><br /> <img src="images/image2.jpg" alt="" title="" /><br /> <img src="images/image3.jpg" alt="" title="" /><br /> <img src="images/image4.jpg" alt="" title="" /><br /></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 {<br /> position:relative;<br /> height:376px;<br /> width:490px;<br /> margin:0 auto;<br />}<br /><br />#slideshow img {<br /> position:absolute;<br /> top:0;<br /> left:0;<br /> z-index:8;<br />}<br /><br />#slideshow img.active {<br /> z-index:10;<br />}<br /><br />#slideshow img.last-active {<br /> z-index:9;<br />}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() {<br /> var $active = $('#slideshow img.active');<br /><br /> $active.addClass('last-active');<br /><br /> // verifica se existe um próximo objeto na div #slideshow, caso ele nao exista, retorna para o primeiro<br /> var $next = $active.next().length ? $active.next() : $('#slideshow img:first');<br /><br /> // Codigo que define as transicoes entre as imagens<br /> $next.css({opacity: 0.0})<br /> .addClass('active')<br /> .animate({opacity: 1.0}, 1000, function() {<br /> $active.removeClass('active last-active');<br /> });<br />}<br /><br />$(function() {<br /> //Executa a função a cada 5 segundos<br /> setInterval( "slideSwitch()", 5000 );<br />});Vejam agora o exemplo do Slideshow.
é desenvolvedor Front-end desde 2005, viciado em XHTML e CSS. Atualmente trabalha em uma agência web, a Ambulance (www.ambulance.com.br) como desenvolvedor front-end. É criador do blog Pinceladas da Web e do CSS no Lanche, voltado para o mundo do desenvolvimento Front-End.
