Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.748 ]

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

Squirrelmail em português

Incentivando o uso do Webm, formato aberto de "codec" (conteiner) de vídeo

Framework Javascript

Criando variáveis dinamicamente com Javascript

Origens de spam - Investigando e colhendo informações

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Como gerar qualquer emoji ou símbolo unicode a partir do seu teclado

Instalar e Configurar o Slackware Linux em 2025

Como configurar os repositórios do apt no Debian 12 em 2025

Passkeys: A Evolução da Autenticação Digital

Instalação de distro Linux em computadores, netbooks, etc, em rede com o Clonezilla

Dicas

Configurando o Conky para iniciar corretamente no sistema

3 configurações básicas que podem melhorar muito a sua edição pelo editor nano

Como colorir os logs do terminal com ccze

Instalação Microsoft Edge no Linux Mint 22

Como configurar posicionamento e movimento de janelas no Lubuntu (Openbox) com atalhos de teclado

Tópicos

firefox nao guarda meus logins nos sites (1)

Instalar debian testing (13) "por cima" do debian 12 (2)

Erro de segmentação «Segmentation fault (core dumped)» ao retornar obj... (1)

como funciona endereçamento ip? (5)

Preciso atualizar o Vim (2)

Top 10 do mês

Scripts

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

[C/C++] Alucard - scan de redes defensivo

[Outros] Dicas e truques Matematica Básica

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

[C/C++] criptografia de modo simples

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: