Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Boa tarde;
Existe montar um script que ele altere a imagem de background do body de tempo em tempo.
Exemplo, de três em três segundos alterar a imagem de background o fundo do body.
Att;
Gilberto Jr@Maujor, Eu fiz dessa forma abaixo
<script>
imagens = [ 'img/hortifruti.jpeg', 'img/background1.jpg', 'img/bacground3.jpg' ]
var i = 0;
corpo = document.getElementById("corpo");
setInterval( function() {
corpo.style.backgroundImage = 'url(' + imagens[i] + ')';
corpo.style.backgroundSize = 'cover';
corpo.style.backgroundRepeat = 'no-repeat';
corpo.style.backgroundPosition = 'fixed';
if ( i < 2 ) {
i = i + 1;
}else{
i=0;
}
}, 3000);
</script>
<body id="corpo">
Mas não funcionou.
Att;
Gilberto Jr@Gilberto Jr
Você colocou o script no final da HTML? antes da tag de fechamento de BODY?
Em HEAD não funciona.
Abra o console do navegador e veja se há alguma mensagem.
O caminho para a imagem em relação ao arquivo está certo?
A primeira imagem é .jpeg mesmo?
O script funciona conforme o Fiddle que criei.
>
1 hora atrás, Maujor disse:
@Gilberto Jr
Você colocou o script no final da HTML? antes da tag de fechamento de BODY?
Em HEAD não funciona.
Abra o console do navegador e veja se há alguma mensagem.
O caminho para a imagem em relação ao arquivo está certo?
A primeira imagem é .jpeg mesmo?
O script funciona conforme o Fiddle que criei.
@Maujor, eu tinha colocado antes do inicio da abertura da tag body.
agora eu coloquei no final da pagina, antes do fechamento da tag body e deu certo.
@Maujor, tem como nesse script que mandou, na transição de uma imagem para a outra, colocar um efeito para a imagem sumir e aparecendo a outra. Tipo, sumindo com o efeito FadeOut e aparencendo com o efeito FadeIn?
Mais uma vez, obrigado.
@Gilberto Jr
Tendo um tempinho faço umas experiências e se conseguir posto aqui.
@Gilberto Jr
Para obter o efeito de transição na troca das imagens faça o seguinte:
Crie uma folha estilos que insira no seletor body.corpo uma imagem de fundo com uso da propriedade transition.
Quando a página for carregada adicione, com uso de JavaSript, a classe corpo no elemento body.
Adapte o script mostrado anteriormente.
Consulte a solução com transição neste link
Nota: O efeito aparece depois que as imagens estiverem no cache.
>
Em 11/05/2018 at 23:44, Maujor disse:
@Gilberto Jr
Para obter o efeito de transição na troca das imagens faça o seguinte:
Crie uma folha estilos que insira no seletor body.corpo uma imagem de fundo com uso da propriedade transition.
Quando a página for carregada adicione, com uso de JavaSript, a classe corpo no elemento body.
Adapte o script mostrado anteriormente.
Consulte a solução com transição neste link
Nota: O efeito aparece depois que as imagens estiverem no cache.
Obrigado @Maujor.
O Cliente gostou.
Att;
Gilberto JrVlw também tava precisando ksksks
Pra imitar um app de um filme
@Gilberto Jr
Use JavaScript:
-
Crie o array imagens[ ] com endereço das imagens;
-
Use método setInterval para definir com JS a imagem imagens[ i ] de 3s em 3s. Coloque o contador i no método.
Consulte a solução proposta neste link
Nota: Na primeira vez que as imagens carregam há um retardo na troca, devido ao tempo de carregamento da imagem (usei imagens grandes e de alta resolução) a seguir elas entram em cache e a troca é instantânea.