Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.500 ]

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

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

Variáveis variáveis em JavaScript

Netflix no Firefox (Debian) - Error: Request mediaKeySystem access rejected: EME has been preffed off [Resolvido]

Navegando anônimo

Programação orientada à objetos em JavaScript

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Instalar certificado digital Safesign, fornecido pela Certisign e utilizado pela OAB-SP, em qualquer distribuição Linux usando distrobox

Manutenção de sistemas Linux Debian e derivados com apt-get, apt, aptitude e dpkg

Criatividade para TI parte 1

Melhorando o tempo de boot do Fedora e outras distribuições

Como instalar as extensões Dash To Dock e Hide Top Bar no Gnome 45/46

Dicas

Como Atualizar Fedora 39 para 40

Instalar Google Chrome no Debian e derivados

Consertando o erro do Sushi e Wayland no Opensuse Leap 15

Instalar a última versão do PostgreSQL no Lunix mantendo atualizado

Flathub na sua distribuição Linux e comandos básicos de gerenciamento

Tópicos

40 Melhor que 24.04 (0)

ASRock H310CM-HG4 vs Linux [RESOLVIDO] (18)

Mikrotik dhcp server (6)

Microfone do meu headset não é recinhecido. Meu notebook é um Acer Asp... (12)

Atenção a quem posta conteúdo de dicas, scripts e tal (2)

Top 10 do mês

Scripts

[Python] Adicione a opção Redimensionar e rotacionar imagens ao Nautilus

[Shell Script] Script para desinstalar pacotes desnecessários no OpenSuse

[Shell Script] Script para criar certificados de forma automatizada no OpenVpn

[Shell Script] Conversor de vídeo com opção de legenda

[C/C++] BRT - Bulk Renaming Tool

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: