Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.091 ]

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

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

Palheta de cores utilizando Json e Javascript não obstrutivo

Origens de spam - Investigando e colhendo informações

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

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Trabalhando com permutações em ordem lexicográfica crescente

Gerar senhas seguras com Python

Aplicação do firmware intel-microcode no Slackware

Expressões Regulares - Entenda o que são Lookahead e Lookbehind

Linguagem Lua - Introdução ao Aprendizado da Linguagem

Dicas

Traceroute - como escolher qual gateway ou interface de rede será usado

ShellDocTemplate - Template para documentação de códigos em Shell Script

Removendo Lightdm e boot splash do GRUB

Reparar - Recuperação de sistemas baseados em Debian

Vim - juntar múltiplas linhas em uma só (JOIN)

Tópicos

64bits tem mesmo melhor desempenho em cpus antigas ? (1)

Boot apenas em Legacy (1)

Instalando em um Dell Somente com Wifi (3)

wi fi caindo tempo todo no ubuntu -20.04 (6)

Lentidão no VSCode e bug nas cores (4)

Top 10 do mês

Scripts

[Shell Script] Configuração do firewall UFW

[Pascal/Kylix] Editor de texto em Pascal/Lazarus

[Shell Script] Manutenção e limpeza do Linux

[Python] Shell Reverso em Python

[Javascript] Gerador de exercícios para matemática

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: