Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>Carregando comentários...