Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.969 ]

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

Palheta de cores utilizando Json e Javascript não obstrutivo

Variáveis variáveis em JavaScript

Squirrelmail em português

Instalando Flash Player no Arch Linux

Criando variáveis dinamicamente com Javascript

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

IA Turbina o Desktop Linux enquanto distros renovam forças

Como extrair chaves TOTP 2FA a partir de QRCODE (Google Authenticator)

Linux em 2025: Segurança prática para o usuário

Desktop Linux em alta: novos apps, distros e privacidade marcam o sábado

IA chega ao desktop e impulsiona produtividade no mundo Linux

Dicas

Atualizando o Fedora 42 para 43

Como saber se o seu e-mail já teve a senha vazada?

Como descobrir se a sua senha já foi vazada na internet?

Como instalar o repositório do DBeaver no Ubuntu

Como instalar o Plex Media Server no Ubuntu

Tópicos

Problemas com Driver NVIDIA (5)

Warcraft II Remastered no Linux? (8)

Instalação dualboot Windows 11 e Debian 13 (7)

Programa fora de escala na tela do pc (37)

Mint Xfce não mantém a conexão no wi-fi (0)

Top 10 do mês

Scripts

[Shell Script] Atualizar Debian versão 2.0

[Shell Script] fuckdrive - zerador de unidades

[Shell Script] Script para atualizar o Debian 13

[Shell Script] Script para teste de THP no sistema

[Shell Script] Deixando o Plasma6 mais fluido

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: