Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 11.042 ]

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

Origens de spam - Investigando e colhendo informações

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

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

Fullscreen com jQuery e CSS

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Cirurgia para acelerar o openSUSE em HD externo via USB

Void Server como Domain Control

Modo Simples de Baixar e Usar o bash-completion

Instalar/habilitar o Linux nativo dentro do Windows com WSL (Windows Subsystem for Linux - Subsistema do Windows para Linux)

Monitorando o Preço do Bitcoin ou sua Cripto Favorita em Tempo Real com um Widget Flutuante

Dicas

[Resolvido] VirtualBox can't enable the AMD-V extension

Pós Instalação Zorin OS 18

Como verificar a saúde dos discos no Linux

Como instalar , particionar, formatar e montar um HD adicional no Linux?

Como automatizar sua instalação do Ubuntu para desenvolvimento de software.

Tópicos

Interface Gráfica (13)

Fiz uma pergunta no fórum mas não consigo localizar (20)

Quais os códigos mais dificeis que vcs sabem fazer? (8)

Pfsense inacessivel após um periodo de tempo (1)

Não consigo instalar distro antiga no virtualbox nem direto no hd (9)

Top 10 do mês

Scripts

[Shell Script] Pós Instalação Fedora 43+

[Shell Script] Task Manager para Terminal

[Shell Script] Atualizar Debian versão 2.0

[Shell Script] fuckdrive - zerador de unidades

[Shell Script] Script para atualizar o Debian 13

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: