Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde amigos do fórum, estou encontrando dificuldades em IMPLEMENTAR o efeito FADE.
Tenho uma página ,logo abaixo, em que as imagens do BACKGROUND estão passando randomicamente de forma GROSEIRA e eu gostaria de implementar essa transição entre as imagens de forma mais SUAVE com o efeito FADE.
Alguém aí poderia me dá essa força?
Obrigadão a todos.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript">var imageCount = 0;
var currentImage = 0;
var images = new Array();
images[0] = '1.jpg';
images[1] = '2.jpg';
images[2] = '3.jpg';
images[3] = '4.jpg';
var preLoadImages = new Array();
for (var i = 0; i < images.length; i++) if (images[i] == "")
break;
preLoadImages[i] = new Image();
preLoadImages[i].src = images[i];
imageCount++;
}
function startSlideShow() if (document.body && imageCount > 0)
{
document.body.style.backgroundImage = "url("+images[currentImage]+")";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundRepeat = "repeat";
document.body.style.backgroundPosition = "left top";
currentImage = currentImage + 1;
if (currentImage > (imageCount-1))
{
currentImage = 0;
}
setTimeout('startSlideShow()', 3500);
}
}
startSlideShow();</script>
</body>
</html>Obrigado Bru_ce , vou dá uma olhada, porém não tenho muitos conhecimentos em jQuery .
Outro Detalhe é que tem que ser BACKGROUND para aparcer em qualquer tela de qualquer configuração sem aparecer aquela barra de rolagem na LATERAL e VERTICAL.
Se usar <div></div> no BODY não vai servir para o que eu estou querendo, tem que ser BACKGROUND PURO!
Tem que ser imagem de fundo mesmo, pois as imagens que vou usar são de 1600px por 1067px com <DIV> a camada vai fazer aparecer barra de rolagens o que não pode acontecer.Não dá amigo. Vc não vai conseguir colocar um efeito fade no background.
para o seu caso, isso aqui resolve:
http://buildinternet.com/project/supersized/
demo com fade:
http://buildinternet.com/project/supersized/slideshow/3.2/fade.html
Tenta com o plugin jQuery cycle amigo.
Exemplo:
http://www.tidbits.com.br/como-criar-um-slideshow-usando-jquery-e-o-plugin-cycle-em-3-minutos