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 ]
Tweet
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.
O HTML para o slide de imagem deve ser o seguinte:
E antes do HTML coloque esse trecho de CSS:
O ideal é que o tamanho das imagens dentro do slide sejam as mesmas.
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
Iniciando com a jQuery
Javascript é com jQuery
Validar radio buttons com jQuery
Atualizando conteúdo dinamicamente com jQuery
Meus primeiros passos com jQuery
CHM do jQuery
Accordion menu (menu sanfona) com jQuery
jQuery plugin mouse gestures
jQuery e suas facilidades
Iniciando com jQuery
Listar todos itens relacionados
Avaliação
Esta publicação ainda não foi avaliada!
A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.
Comentários
| Enviado 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 |
| Enviado por alaerte em 03/11/2009 às 20:06 Muito legal |
Envio de comentário:
Domingo, 26 de Maio de 2013
Área restrita
Leitura recomendada
Últimas publicações
Top 5 membros
- dddweb213 pts
- andersonop207 pts
- Jotah197 pts
- fbinasco165 pts
- fredbcn117 pts
Últimos membros online
- xKuRtem 25/05 às 10:56
- GabsMullerem 24/05 às 20:30
- salamandraem 24/05 às 19:55
Últimos membros cadastrados
- salamandraem 24/05
- gravelem 24/05
- flexaem 23/05





