Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.940 ]

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

Programação orientada à objetos em JavaScript

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

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

Como ajustar o tamanho do iframe pelo tamanho da tela e mudar o target de uma página depois dela aberta

Variáveis variáveis em JavaScript

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Blender 5.0 Beta, Firefox 144 e avanço da IA dominam o dia no mundo Linux

Desktop Linux ganha fôlego enquanto distros refinam experiência e segurança

Wayland em alta, IA em debate e novos ventos para distros e devices

Qt 6.10 e Python 3.14 puxam o ritmo do software livre nesta quarta

Atualizações de Apps, Desktop e Kernel agitam o ecossistema Linux nesta terça-feira

Dicas

Como mudar o nome de dispositivos Bluetooth via linha de comando

Adicionando o repositório backports no Debian 13 Trixie

Tratando arquivos de pacote

Como definir um IP estático no Linux Debian

Hardware antigo no Arch Linux e outras distribuições

Tópicos

Lançado LMDE 7 (0)

Alsa Floorp (0)

Erro no Plugin do PDF GLPI 11 (0)

Enviar arquivos por uma segunda placa de rede (3)

Compactar pasta por pasta (2)

Top 10 do mês

Scripts

[Shell Script] Script para teste de THP no sistema

[Shell Script] Deixando o Plasma6 mais fluido

[Shell Script] Script ligar-scrolllock

[Shell Script] Como ver/ouvir vídeo/áudio via Terminal de modo prático

[Shell Script] Criar Script para apagar determinados arquivos

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: