Ir para conteúdo

Arquivado

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

henrique56

Alterar Background automatico com efeito fade

Por , em Javascript

Recommended Posts

henrique56    0

henrique56
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

augustoclaro    2

augustoclaro
Postado

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">
<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>
=D
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

henrique56    0

henrique56
Postado

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">
<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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

augustoclaro    2

augustoclaro
Postado

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:

 

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

e faz o resto do código embaixo dessa div

sakou? =D

Compartilhar este post

Link para o post
Compartilhar em outros sites

brpiccoli    0

brpiccoli
Postado

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?

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