Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 11.073 ]

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

Upload de múltiplos arquivos com Javascript + Flash

Resolvendo erro de atualização do firmware do modem DSL2640t

Criando variáveis dinamicamente com Javascript

Framework Javascript

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

LazyDocker – Interface de Usuário em Tempo Real para o Docker

Instalando COSMIC no Linux Mint

Turbinando o Linux Mint: o poder das Nemo Actions

Inteligência Artificial no desenvolvimento de software: quando começar a usar?

Executar Scripts Remotamente

Dicas

[Resolvido] Algo deu errado ao abrir seu perfil

Usando o VNSTAT para medir o seu consumo de internet

Habilitando clipboard manager no ambiente COSMIC

A compatibilidade do LibreOffice com o Microsoft Office

Colocando hotcorner no COSMIC para exibir "workspaces"

Tópicos

Não estou conseguindo fazer funcionar meu Postfix na versão 2.4 no Deb... (1)

initrams (1)

Bloquear milhões de IPs (6)

Quando vocês pararam de testar distros? (6)

A fórmula da coca-cola foi decompilada e agora é opensource! (4)

Top 10 do mês

Scripts

[C/C++] hexfile - conversor de binario/hexadecimal

[Shell Script] clean_server.sh - Script para limpar o servidor

[Shell Script] Instalação remota de pacotes

[Shell Script] Script para Teste de Rede

[Shell Script] Script que sincroniza a mensagem de cópia de pendrive com o processo real

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: