Publicado em 18 de jul.

Alterando background com setInteval();

Olá, sou iniciante em desenvolvimento web e estou criando um site, nele necessito trocar o background a cada intervalo de tempo pre definido. E para aprender já busquei de diversas formas na web e até em sites como w3c ou mozzila developer. Mas nunca achei o que preciso, essa alteração tem que começar desde o primeiro momento na pagina e deve ocorrer de forma continua. Para fins de estudo fiz uma pagina simples para mostrar como estou fazendo. o background deve ser no css. Não sei como chamar a função no html e nem se a funçao que fiz serve para o proposito que eu quero me ajudem PLZ!!

<!DOCTYPE html>

<html lang="pt-br">
 <head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="index.css">
 <title>Testando JavaScript</title>
 </head>
 <body id="corpo">
 </body>
</html>

@charset "UTF-8";

body#corpo {

 background-image: url(computador.jpg);
 background-repeat: no-repeat;
}

function mudaBkg(){
document.getElementById("corpo").style.backgroundImage = "url('chave.jpg')";
}

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Thalisson Marthinele· 18 de jul.

Usei o Exemplo utilizando Cores, so você alterar da sua forma

<html>
 <head>
 <title>BackGround</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script>
 function randOrd() {
 return (Math.round(Math.random()) - 0.5);
 }
 var cor = Array();
 cor[0] = "#000";
 cor[1] = "#060606";
 cor[2] = "#87CEFA";
 cor[3] = "#8A2BE2";
 cor[4] = "#FF4500";

 setInterval(function () {
 var cores = cor.sort(randOrd)
 document.body.style.background = cores[0];
 }, 5000);
 </script>
 </head>
 <body>
 <div>body</div>
 </body>
</html>

gabrielrguarini· 18 de jul.

2 horas atrás, Thalisson Marthinele disse:

Usei o Exemplo utilizando Cores, so você alterar da sua forma

<html>
 <head>
 <title>BackGround</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script>
 function randOrd() {
 return (Math.round(Math.random()) - 0.5);
 }
 var cor = Array();
 cor[0] = "#000";
 cor[1] = "#060606";
 cor[2] = "#87CEFA";
 cor[3] = "#8A2BE2";
 cor[4] = "#FF4500";

 setInterval(function () {
 var cores = cor.sort(randOrd)
 document.body.style.background = cores[0];
 }, 5000);
 </script>
 </head>
 <body>
 <div>body</div>
 </body>
</html>

  

	Mas ai ele simplesmente altera né? Teria uma forma de fazer uma transição de uma para a outra ?

Thalisson Marthinele· 18 de jul.

Sim,

Pode Pesquisar por Jquery Effects

https://api.jquery.com/category/effects/

Mais Tem varios Plugins Bacana para isso.

De uma Olhada em:

https://vegas.jaysalvat.com/