Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.681 ]

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

Upload de múltiplos arquivos com Javascript + Flash

Navegando anônimo

Criando variáveis dinamicamente com Javascript

Efetuando debug de JavaScript no Mozilla

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Enviar mensagem ao usuário trabalhando com as opções do php.ini

Meu Fork do Plugin de Integração do CVS para o KDevelop

Compartilhando a tela do Computador no Celular via Deskreen

Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota

Configuração para desligamento automatizado de Computadores em um Ambiente Comercial

Dicas

Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil

Cups: Mapear/listar todas as impressoras de outro Servidor CUPS de forma rápida e fácil

Criando uma VPC na AWS via CLI

Multifuncional HP imprime mas não digitaliza

Dica básica para escrever um Artigo.

Tópicos

Tem como instalar o gerenciador AMD Adrenalin no Ubuntu 24.04? (15)

Tenho dois Link's ( IP VÁLIDOS ), estou tentando fazer o failover... (0)

Pendrive não formata de jeito nenhum (4)

Problemas ao instalar o PHP (10)

Descompactar arquivos winrar no linux (9)

Top 10 do mês

Scripts

[C/C++] reverse shell na marra!

[Outros] Dicas e truques Matematica Básica

[C/C++] criptografia de modo simples

[C/C++] intdb - gerador de wordlist numerica

[C/C++] genpass - gerador de senhas seguras

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: