Slide de imagens em jQuery

Publicado por Ricardo Perez em 29/10/2009

[ Hits: 10.137 ]

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

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

Resolvendo erro de atualização do firmware do modem DSL2640t

Programação orientada à objetos em JavaScript

Extensões (Webmaster) do Firefox

Palheta de cores utilizando Json e Javascript não obstrutivo

Comentários

Nenhum comentário foi encontrado.

Patrocínio

Site hospedado pelo provedor RedeHost.

Destaques

Vaga para React Native (0)

IMPOSTO DE RENDA 2021 [RESOLVIDO] (12)

Artigos

Otimizando a Distribuição Gentoo

Virtualização com Proxmox VE

Criando um Arch Linux de bolso a partir de qualquer distribuição

Instale uma distro dentro de outra

Montando HD, Pendrive ou Pasta de Rede para Gravações de Ligações do Elastix e Módulo de Call Center

Dicas

Ativando "snap" no LxQt

Como Ler e Gerar QR Code no Linux

VLC Player Rodando DVD no Debian 10

Como escrever em arquivos protegidos usando o sudo e redirecionamento

Sites e grupos para encontrar emprego de TI

Tópicos

Processador antigo para rodar a Steam? Help!!! (7)

Servidor CITRIX (Xenserver 6.5) - Não inicializa (0)

Comando RM não funciona no LinuxMint-20.1 (5)

Arch sem som (Garuda) (7)

Top 10 do mês

Xerxes
1° lugar - 101.617 pts
Fábio Berbert de Paula
2° lugar - 80.618 pts
Clodoaldo Santos
3° lugar - 61.093 pts
Mauricio Ferrari
4° lugar - 38.788 pts
Daniel Lara Souza
5° lugar - 32.386 pts
Diego Mendes Rodrigues
6° lugar - 28.297 pts
Alberto Federman Neto.
7° lugar - 22.972 pts
Lisandro Guerra
8° lugar - 20.687 pts
Robson Fernando Gomes
9° lugar - 19.038 pts
edps
10° lugar - 18.602 pts

Scripts

[Python] Alien Warfare

[Shell Script] Socat Proxifier

[Shell Script] AutoLogin Slackware Current - Init 3

[C/C++] Mini Analisador Léxico que conta palavras numa string

[Outros] Teste de hardware e outros