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

Plugin para formatação de preço em jQuery
jQuery - A biblioteca do programador Javascript
Meus primeiros passos com jQuery
Iniciando com jQuery
Accordion menu (menu sanfona) com jQuery
Atualizando conteúdo dinamicamente com jQuery
jQuery plugin mouse gestures
Simples menu accordion com jQuery
Manipulando select e option com o jQuery
jQuery e suas facilidades

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:




  

Segunda, 01 de Setembro de 2014




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Livro - Desenvolvendo para iPhone e iPad: Aprenda a desenvolver aplicativos utilizando iOS SDK


Capa do livro
Analise De Pontos De Funçao


Capa do livro
Código Limpo: Habilidades Práticas do Agile Software





Hostnet

IMD