Slide de imagens em jQuery
Dica publicada em Javascript / Avançado
Slide de imagens em jQuery
Nessa dica falo um pouco sobre Effects e alguns métodos interessantes do jQuery, Usando como exemplo um simples slide de imagem.
Neste código veremos os efeitos FadeIn (efeito de aparecer) e fadeOut (efeito de desaparecer), além do método next.
O HTML para o slide de imagem deve ser o seguinte:
E antes do HTML coloque esse trecho de CSS:
Post original: http://blog.stiod.com/2009/10/26/slide-de-imagens-jquery/
Neste código veremos os efeitos FadeIn (efeito de aparecer) e fadeOut (efeito de desaparecer), além do 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 para o 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");}
)
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 para o 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:
E antes do HTML 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;
}
O exemplo acima fica assim:
O ideal é que o tamanho das imagens dentro do slide sejam as mesmas.
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;
}
Post original: http://blog.stiod.com/2009/10/26/slide-de-imagens-jquery/