Slide de imagens em jQuery
Publicado por Ricardo Perez em 29/10/2009
[ Hits: 10.745 ]
Slide de imagens em jQuery
Neste código veremos os efeitos FadeIn (efeito de aparecer) e fadeOut (efeito de desaparecer), além do método next.
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:
<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>
E antes do HTML coloque esse trecho de CSS:
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.
Post original: http://blog.stiod.com/2009/10/26/slide-de-imagens-jquery/
VIM - Substituindo tabs por espaços
Upload de múltiplos arquivos com Javascript + Flash
Instalando Flash Player no Arch Linux
Nenhum comentário foi encontrado.
Patrocínio
Destaques
Artigos
Como gerar qualquer emoji ou símbolo unicode a partir do seu teclado
Instalar e Configurar o Slackware Linux em 2025
Como configurar os repositórios do apt no Debian 12 em 2025
Passkeys: A Evolução da Autenticação Digital
Instalação de distro Linux em computadores, netbooks, etc, em rede com o Clonezilla
Dicas
Configurando o Conky para iniciar corretamente no sistema
3 configurações básicas que podem melhorar muito a sua edição pelo editor nano
Como colorir os logs do terminal com ccze
Instalação Microsoft Edge no Linux Mint 22
Como configurar posicionamento e movimento de janelas no Lubuntu (Openbox) com atalhos de teclado
Tópicos
Linux Mint não conecta Wi-Fi sem fio (21)
Criar perfil temporário no Active Directory samba4-21 (2)
Meu Kubuntu não inicia, além do modo de recuperação (no meu dualboot (1)
Top 10 do mês
Scripts
A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.
Site hospedado por:
