Publicado em 23 de ago.

Alterar Background automatico com efeito fade

Bom dia pessoal!

Estou fazendo um site no qual preciso que ele tenha uma imagem de background da tag body. Só que não é apenas uma imagem, necessito que sejam algumas e que elas alterem automaticas a cada "X" segundos e que essa transição das imagens seja com um efeito fade.

Alguem sabe como fazer isso?

Desde já obrigado a ajuda!

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

augustoclaro· 23 de ago.

Olá +D Você pode usar JQuery?

caso você possa usar o jquery, eu fiz aqui o que você precisa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style>
#box{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:-1;
}
</style>
<script src="jquery.js"></script>
<script>
var id = 0;
var imgs = new Array();
imgs[0] = "img1.jpg";
imgs[1] = "img2.jpg";
imgs[2] = "img3.jpg";
imgs[3] = "img4.jpg";

//Aqui apenas adicione mais imagens

function troca(){
	if (id<imgs.length-1){
	id++;
	}else{
 id=0
	}
	$("#box").fadeOut(500);
	setTimeout("$('#box').html('<img src=\""+imgs[id]+"\" width=\"100%\" height=\"100%\" />');$('#box').fadeIn(500);",500);
}
var segundos = 3; //Segundos entre cada imagem
setInterval("troca();",segundos*1000);
</script>
</head>

<body>
<div id="box"><img src="img1.jpg" width="100%" height="100%" /></div>

</body>
</html>

henrique56· 23 de ago.

Oi Augusto, oq você mandou ta funcionando perfeitamente! Fiz algumas pequenas modificações pra atender minha necessidade e o efeito continuou ok! Abaixo segue o código já com as alterações feitas por mim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">

	margin:0;
	padding:0;
}

#main{
 position:absolute;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
 z-index:-1;
 overflow-x:hidden;
}

#site{
	width:980px;
	height:600px;
	background:#FF0;
	margin:0 auto;
}
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var id = 0;
var imgs = new Array();
imgs[0] = "img.jpg";
imgs[1] = "img.jpg";
imgs[2] = "img.jpg";
imgs[3] = "img.jpg";

//Aqui apenas adicione mais imagens

function troca(){
 if (id<(imgs.length-1)){
 id++;
 }else{
 id=0
 }
 $("#main").fadeOut(600);
 setTimeout("$('#main').html('<img src=\""+imgs[id]+"\" width=\"100%\" height=\"100%\" alt=\"\" />');$('#main').fadeIn(600);",600);
}
var segundos = 10; //Segundos entre cada imagem
setInterval("troca();",segundos*1000);
</script>
</head>

<body id="main">

	<div id="site">

 </div>

</body>
</html>

Acontece o seguinte: essa div#site aparece assim que abro o site que é o correto, só que não esta com o tamanho que está com dimensões menores as que eu defini no CSS e também assim que começa a primeira transição a div some e não aparece mais =//

Tem alguma ideia do que pode estar acontecendo?

augustoclaro· 24 de ago.

então, você tem que criar uma div SÓ para a imagem

nesta div vce não poem mais nenhum conteúdo.

Aí você cria uma div que jah começa com a primeira imagem:

e faz o resto do código embaixo dessa div

sakou? =D

Alex Lupóz· 4 de mar.

Como fazer para colocar os respectivos links nas imagens?

brpiccoli· 24 de set.

Bom dia,

Primeiramente muito obrigado por este fórum, me ajudou muito.

Consegui fazer funcionar graças ao código do amigo Augusto.

Temo que como foi feito a muito tempo, talvez não consiga resposta mas vou tentar mesmo assim...

Minha dúvida é a seguinte: no momento de transição das imagens tenho uma cor fixa, definida na div onde as imagens passam.

Tenho como fazer a transição utilizando a próxima imagem que segue no efeito fade-out/fade-in ao invés dessa cor?