Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 11.170 ]

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

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

Extensões (Webmaster) do Firefox

Instalando Flash Player no Arch Linux

Editor de HTML5 em tempo real

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

Criando um painel de controle (Dashboard) para seu servidor com o Homepage

O Abismo entre o Código e o Chão: Saltos Tecnológicos e a Exclusão Estrutural no Brasil

Instalar e Configurar a santíssima trindade (PAP) no Void Linux

O Editor de Texto Nano: Simplicidade no Terminal

SynapSeq - programa para estimular as ondas cerebrais

Dicas

Acessando página do Syncthing fora da máquina local

[Resolvido] Meu monitor suporta 100fps. Por que o máximo é 60fps nos jogos?

Jogando "Magic" gratuitamente no Linux

Zoxide e fzf no bash para incrementar o uso do Terminal

As diferencas entre o clipboard comum e a selecao ativa

Tópicos

A falsa sensação de que entende a tal da palavra! (4)

Retorno [RESOLVIDO] (6)

Novos requisitos de sistema para a versão 26.04 (3)

SystemD e mais polêmicas. (0)

Como instalo o Clipper/Harbour no Linux Ubuntu (1)

Top 10 do mês

Scripts

[Shell Script] imageDownloader

[Shell Script] Flatpak manager

[Shell Script] Renomador em lote feito em Zenity

[C/C++] Jogo do Labirinto no Terminal

[Shell Script] Status do teclado em qualquer ambiente gráfico com system tray no Linux

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: