Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.494 ]

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

Framework Javascript

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

Evitando que sua página fique entre frames

HTML - Forçar a abertura de todos os links em uma nova janela

Copiando imagens bloqueadas

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Melhorando o tempo de boot do Fedora e outras distribuições

Como instalar as extensões Dash To Dock e Hide Top Bar no Gnome 45/46

E a guerra contra bots continua

Tradução do artigo do filósofo Gottfried Wilhelm Leibniz sobre o sistema binário

Conheça o firewall OpenGFW, uma implementação do (Great Firewall of China).

Dicas

Instalando o FreeOffice no LMDE 6

Anki: Remover Tags de Estilo HTML de Todas as Cartas

Colocando uma opção de redimensionamento de imagem no menu de contexto do KDE

Instalar IRPF 2024 no Linux

Instalando Google Chrome no LMDE 6

Tópicos

Pirataria ou não? (2)

erro usando o git (3)

Não consigo acessar os modos de desempenho no mint 2.3 (4)

Teclado e mouse [RESOLVIDO] (6)

Mikrotik dhcp server (4)

Top 10 do mês

Scripts

[Shell Script] Script para desinstalar pacotes desnecessários no OpenSuse

[Shell Script] Script para criar certificados de forma automatizada no OpenVpn

[Shell Script] Conversor de vídeo com opção de legenda

[C/C++] BRT - Bulk Renaming Tool

[Shell Script] Criação de Usuarios , Grupo e instalação do servidor de arquivos samba

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: