Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.809 ]

0 0

 

Denuncie   Favoritos   Indicar   Impressora

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.

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");}
)



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>

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.

Post original: http://blog.stiod.com/2009/10/26/slide-de-imagens-jquery/

Outras dicas deste autor

VIM - Substituindo tabs por espaços

Leitura recomendada

Upload de múltiplos arquivos com Javascript + Flash

Framework Javascript

Efetuando debug de JavaScript no Mozilla

Evitando que sua página fique entre frames

Netflix no Firefox (Debian) - Error: Request mediaKeySystem access rejected: EME has been preffed off [Resolvido]

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Automatizando digitação de códigos 2FA no browser

Resolver problemas de Internet

Como compartilhar a tela do Ubuntu com uma Smart TV (LG, Samsung, etc.)

Descritores de Arquivos e Swappiness

tux-gpt - Assistente de IA para o Terminal

Dicas

Como converter imagens PNG/JPEG para SVG em linha de comando

Fez porcaria no teu repositório Git? Aprenda a restaurar uma versão anterior do seu código!

Restaurando Fontes de Download do Hydra no Linux

Atualizando "na marra" o YT-DLP quando começa a dar erro de downloads

Como instalar o WPS com interface e corretor ortográfico em PT-BR no Arch Linux

Tópicos

Comprei thin client dell wyse tx0 3010 ele tá com Login é senha nao v... (0)

Ubuntu 25.04 não instala. (16)

Tela Preta - Linux Q4OS (3)

Erro na atualização dos pacotes (8)

[AJUDA] Problemas ao atualizar BIOS da Gigabyte B550M K rev. 1.1 — “RO... (5)

Top 10 do mês

Scripts

[Shell Script] Instalador de Hotspot Linux Debian (SysV)

[Shell Script] Script para verificar o Status da bateria

[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)

[C/C++] IPHunter - caçador de ip

[Shell Script] Script de Backup do Perfil dos Usuários do Sistema em Batch do Windows

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: