Stiod Blog

Continuando a série de post sobre jQuery iniciado por Gabriel.

Hoje vou mostrar um pouco sobre Effects e alguns métodos interessantes do jQuery, Usando como exemplo um simples slide de Imagem.

Neste código vemos o effect FadeIn(efeito de aparecer) e fadeOut(efeito de desaparecer) e o método next

 
function slidein(){
    active_img = $(".active");
    //O método next pega o próximo objeto,  dentro do div #slide-img
    next_img =active_img.next();
 
    // verifica se existe um próximo objeto no div #slide-img
    if (next_img.length==0){
            //se não tem um próximo objeto retorna pro primeiro
            next_img = $(".first-active");
    }
 
    active_img.fadeOut("slow");
    active_img.removeClass('active');
 
    next_img.fadeIn("slow");
    next_img.addClass('active');
}
 
$(document).ready(function(){
setInterval("slidein()", "3500");}
)
 

O HTML para o slide de imagem deve ser o seguinte:

 
<div id="slide-img">
<ul>
<li class="active first-active"><img src="img1.jpg"/></li>
<li><img src="img2.jpg" /></li>
<li><img src="img3.jpg" /></li>
</ul>
</div>
 

Antes coloque esse trecho de CSS:

 
#slide-img {
    float:left;
    height:xxx px;/* a largura padrão das imgs dentro do slide*/
    overflow:hidden;
    width:yyy px;/* o altura padrão das imgs dentro do slide*/;
}
* {
    margin:0;
    padding:0;
}
 

Veja o exemplo aqui:

O ideal que o tamanho das imagens dentro do slide sejam as mesmas