Slide de imagens em jQuery


Autor/fonte: Ricardo Perez
E-mail/Url: http://www.vivaolinux.com.br/dica/Slide-de-imagens-em-jQuery
Tags: [ jquery ]



Digg del.icio.us

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 ideal é que o tamanho das imagens dentro do slide sejam as mesmas.




Enviado por xKuRt em 03/11/2009 às 15:31


Itens relacionados

Meus primeiros passos com jQuery
Javascript é com jQuery
Simples menu accordion com jQuery
Arredondando cantos com jQuery
Iniciando com jQuery
Conheça o jQuery Mobile
Máscaras para formulários com jQuery e Masked Input
CHM do jQuery
Plugin para formatação de preço em jQuery
Accordion menu (menu sanfona) com jQuery

Listar todos itens relacionados

Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

AvatarEnviado por Broken em 04/12/2009 às 18:25

Ta mais, ai ele vai definir conforme o tamanho da imagem???pq eu achei o mootools, ele faz esse mesmo sistema, mais o tamanho é definido em um código e eu naum consegui achar aonde que muda...

Ai fica ruim...

Vlw...

--
Broken's Webdesign

AvatarEnviado por alaerte em 03/11/2009 às 20:06

Muito legal


Envio de comentário:




  

Quarta, 01 de Outubro de 2014




Leitura recomendada

O Melhor do PHP

Top 5 membros

Últimos membros online

  • 1em 01/10 às 12:55
  • kelexem 24/09 às 09:55
  • xKuRtem 23/09 às 20:00

Últimos membros cadastrados



Capa do livro
SQL, PL/SQL, SQL*PLus - Manual de Referência Completo e Objetivo


Capa do livro
100 Questões Comentadas de TI (Tecnologia da Informação) - Para Concursos


Capa do livro
Windows Server 2008 - Administração de Redes





Hostnet

IMD