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

jQuery - A biblioteca do programador Javascript
jQuery: Javascript de uma maneira diferente
Meus primeiros passos com jQuery
CHM do jQuery
Plugin para formatação de preço em jQuery
Atualizando conteúdo dinamicamente com jQuery
Validar radio buttons com jQuery
Iniciando com a jQuery
jQuery e suas facilidades
Conheça o jQuery Mobile

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:




  

Sexta, 27 de Maio de 2016




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Desenhando com o Google SketchUp


Capa do livro
Java na Web


Capa do livro
Criando Sites com HTML





Hostnet

IMD