Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fasbra

[Resolvido] [jQuery]Banner com fade não funciona

Por , em Javascript

Recommended Posts

fasbra    0

fasbra
Postado

Olá pessoal,

 

Sou novo aqui, mas já conheço a bastante tempo o fórum, sempre encontro uma solução mas desta vez tive que me cadastrar e solicitar vosso auxilio..

 

Pois bem, preciso fazer um banner rotativo com fadein e fadeout, mas não funciona...

 

O código que fiz é o seguinte:

 

<html>
<head>
	<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
	<style type="text/css">
		.animacao{}
		.quadro1{background: url("animacao01.jpg") no-repeat scroll 0 0 transparent;height:109px;width:390px;display:block;}
		.quadro2{
			background: url("animacao02.jpg") no-repeat scroll 0 0 transparent;height:109px;width:390px;display:none;
			/*float: left;
			height: 79px;
			position: relative;
			width: 380px;*/
		}
		.quadro3{background: url("animacao03.jpg") no-repeat scroll 0 0 transparent;height:109px;width:390px;display:none;}
		.quadro4{background: url("animacao04.jpg") no-repeat scroll 0 0 transparent;height:109px;width:390px;display:none;}
	</style>

	<script type="text/javascript">

		$(document).ready(function() {

			var div = $(".animacao > div");
			var i = 0;
			var dTempo = 400;
			var fTempo = 800;

			while (i != div.length) {
				$(div[i]).delay(dTempo).fadeOut(fTempo,function(){
					if (i == div.length-1){
						alert(i);
						i = 0;
						$(div[i]).fadeIn(fTempo);
					} else {
						$(this).next().fadeIn(fTempo);
						i++;
					}
				});
			};
		});

	</script>

</head>
<body>
	<div class="animacao">
		<div class="quadro1"></div>
		<div class="quadro2"></div>
		<div class="quadro3"></div>
		<div class="quadro4"></div>
	</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o cycle te facilita:

http://jquery.malsup.com/cycle/

 

use a transição fade

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito