Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.844 ]

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

Palheta de cores utilizando Json e Javascript não obstrutivo

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

Efetuando debug de JavaScript no Mozilla

Extensões (Webmaster) do Firefox

  

Comentários

Nenhum coment�rio foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Aprenda a Gerenciar Permissões de Arquivos no Linux

Fundo pontilhado CSS

Como transformar um áudio em vídeo com efeito de forma de onda (wave form)

Como aprovar Pull Requests em seu repositório Github via linha de comando

Como gerar um podcast a partir de um livro em PDF

Dicas

Visualizar arquivos em formato markdown (ex.: README.md) pelo terminal

Dando - teoricamente - um gás no Gnome-Shell do Arch Linux

Como instalar o Google Cloud CLI no Ubuntu/Debian

Mantenha seu Sistema Leve e Rápido com a Limpeza do APT!

Procurando vídeos de YouTube pelo terminal e assistindo via mpv (2025)

Tópicos

Sinto uma leve lentidão ao arrastar, miniminizar e restauras as janela... (0)

Zorin OS - Virtual Box não consigo abrir maquinas virtuais (6)

Iinstalar o Scanner Kodak i940 no Linux Mint 19/20? (3)

Pastas da raiz foram para a área de trabalho (4)

usb's param de funcionar do nada (6)

Top 10 do mês

Scripts

[Shell Script] Criar Script para apagar determinados arquivos

[Shell Script] inSANE - Script para usar Scanner

[Shell Script] Instalador do emulador de joystick Xbox para joystick generico para PC, PS2, PS3 (Debian e Derivados

[Shell Script] Instalador de Hotspot Linux Debian (SysV)

[Shell Script] Script para verificar o Status da bateria

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: