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
Máscaras para formulários com jQuery e Masked Input
Iniciando com a jQuery
jQuery: Javascript de uma maneira diferente
Atualizando conteúdo dinamicamente com jQuery
jQuery plugin mouse gestures
Iniciando com 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:




  

Quinta, 30 de Julho de 2015




Leitura recomendada

Algoritmos Estruturados

Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Comandos do Linux - Guia de Consulta Rápida


Capa do livro
Programando em NCL


Capa do livro
Desenvolvendo Websites com PHP - Aprenda a Criar Websites Dinâmicos e Interativos com PHP e Banco de Dados





Hostnet

IMD