5

Estou começando um projeto novo em HTML5 e gostaria de colocar uma img de fundo no header, na vdd quero colocar 4 imagens e quero que elas mudem em cada refresh na pagina, não quero um slider, quero que cada pessoa que entre no site veja uma imagem e em cada carregamento da pagina a img mude. Estou começando agora o projeto e não fiz nada ainda por isso não tenho nada de código pra postar. Alguém conhece algo similar?

0

2 Respostas 2

4

Se for usar apenas JavaScript, eu sugeria o seguinte:

Renomeie os arquivos de fundo com nomes com números sequenciais:

fundo1.jpg
fundo2.jpg
fundo3.jpg
fundo4.jpg

Em seguida após o seu header, chame o script:

<script>
var fundo = [1,2,3,4][Math.floor(Math.random()*4)];
var e_header = document.querySelector("header");
e_header.style.backgroundImage = "url(fundo"+fundo+".jpg)";
</script>

Obs.: Como as imagens serão chamadas por números randômicos, pode ser que a mesma imagem seja carregada após um novo carregamento da página. Caso evitar isso seja de grande importância, você pode criar um localStorage para evitar que a mesma imagem seja carregada novamente no próximo carregamento da página. Para isso o código muda:

<script>
function randFundo(){
   var fundo = [1,2,3][Math.floor(Math.random()*3)];
   !localStorage.fundo ? localStorage.fundo = fundo : 0;
   return localStorage.fundo == fundo
   ?
   (localStorage.fundo = fundo+1)
   :
   (localStorage.fundo = fundo);
}

var e_header = document.querySelector("header");
e_header.style.backgroundImage = "url(fundo"+randFundo()+".jpg)";
</script>

SIMULAÇÃO

Código apenas para teste sem refresh na página. Use um dos códigos acima.

No exemplo abaixo, clique no botão Atualizar para trocar o fundo da div:

var localstorage = { fundo: "" };
function atualizar(){
   var e_header = document.querySelector("header");
   e_header.style.backgroundImage = "url(http://dvdteste.hospedagemdesites.ws/imagem"+randFundo()+".jpg)";
}

function randFundo(){
   var fundo = [1,2,3][Math.floor(Math.random()*3)];
   !localstorage.fundo ? localstorage.fundo = fundo : 0;
   return localstorage.fundo == fundo
   ?
   (localstorage.fundo = fundo+1)
   :
   (localstorage.fundo = fundo);
}

window.onload = atualizar;
header{
   display: block;
   width: 300px;
   height: 200px;
   background-color: yellow;
   background-size: cover;
   float: left;
}
<header></header>
<input type="button" value="Atualizar" onclick="atualizar()" />

5
  • Mas não entendi, eu adiciono as imagens onde? Geralmente iria no arquivo estilo.css e colocaria um background-image mas nesse caso onde eu mostraria o caminho pra as imagens? Commented 21/11/2017 às 1:40
  • @ClaytonFurlanetto Isso mesmo. Para fazer isso no aquivo CSS seria mais complicado, pois teria que criar uma classe para cada imagem de fundo. Na minha sugestão, basta você colocar o caminho das imagens em "url(fundo"+randFundo()+".jpg)";.
    – Sam
    Commented 21/11/2017 às 1:42
  • @ClaytonFurlanetto Seria assim: "url(CAMINHO_DAS_IMAGENS/NOME"+randFundo()+".jpg)";
    – Sam
    Commented 21/11/2017 às 1:43
  • @ClaytonFurlanetto Considerando que as imagens estão num mesmo diretório. Vamos supor que as imagens estão na pasta "/imagens", então você colocaria "url(imagens/fundo"+randFundo()+".jpg)";
    – Sam
    Commented 21/11/2017 às 1:48
  • deu certinho cara, funcionou perfeitamente, era isso que queria msm, muito obrigado mais uma vez! Commented 21/11/2017 às 2:16
1

Pode ser com PHP também. Tenta assim

Coloca isso no PHP:

<?php
    $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg' );     
    $i = rand(0, count($bg)-1); 
    $selectedBg = "$bg[$i]"; 
?>

E isso no css:

body{
    background: url(images/<?php echo $selectedBg; ?>);
}

Importante, o nome das imagens devem ser "bg-0X.jpg" ok, se quiser adicionar mais imgs basta colocar no Array 'bg-05.jpg' e salvar a img na pasta.

[]'s

1
  • É importante dizer que isso só funcionará se o CSS estiver dentro do arquivo PHP, pois caso contrário o código não será interpretado (considerando configurações padrões do servidor).
    – Woss
    Commented 21/11/2017 às 0:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .