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?
2 Respostas
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()" />
-
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)";
.– SamCommented 21/11/2017 às 1:42 -
@ClaytonFurlanetto Seria assim:
"url(CAMINHO_DAS_IMAGENS/NOME"+randFundo()+".jpg)";
– SamCommented 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)";
– SamCommented 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
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
-
É 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).– WossCommented 21/11/2017 às 0:38