Jump to content
Gilberto Jr

Alterando a imagem background de tempo em tempo

Recommended Posts

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

Share this post


Link to post
Share on other sites

@Gilberto Jr
Use JavaScript:

  1. Crie o array imagens[ ] com endereço das imagens;
  2. 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.

 


 

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

@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 1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

@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.

Edited by Maujor
Alterações na JS e CSS do Fiddle

Share this post


Link to post
Share on other sites
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 Jr

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By nilo7004b
      Ola pessoal, sou novo aqui no fórum e desculpem qualquer erro, já procurei bastante pelo meu problema e não consegui encontrar nada a respeito. O meu problema é que eu estou desenvolvendo uma pagina web e após definir o background como um gradiente e adicionar divs aparecem umas manchas brancas pela pagina que vão alterando de posição a medida em que vai fazendo scroll na pagina, na imagem anexada tem o exemplo, gostaria de saber qual a origem do problema e como resolver. Desde já agradeço pela ajuda.
      Obs.: as DIVs adicionadas não estão com a cor de background definida.
       




    • By TheJorge
      Olá pessoal, preciso de ajuda. Tenho um sistemaWeb hospedado no meu servidor dedicado, o servidor é um CentOS 6.10. Quando vou executar um script utilizando o shell_exec do php ele executa normal, mas quando coloco para ser executado em "background" com o "&" não executa em segundo plano, exemplo:
      Execução normal: shell_exec("cd caminho && php script.php"); 
      Execução em Background: shell_exec("cd caminho && php script.php &");
      O script está sendo executado mas não em background, necessito disso pois no sistemaWeb não quero estar esperando a execução do script quero colocar em background para poder continuar utilizando o sistema, o estranho disso é que peguei meu sistemaWeb e coloquei no meu servidor web local, tenho o Ubunto 16 na minha máquina, e funciona, o script é colocado para ser executado em background. Então acredito que deve ter uma configuração a fazer...
      Se alguém poder me ajudar =D
      Obrigado!
    • By ricardopereirasilveira
      Fala pessoal, tudo bem ?
      Uma dúvida, estou criando um site em wordpress, porém ele mostra no background do site, uma imagem com tamanho, e eu não consigo remover de jeito nenhum, poderiam me ajudar onde exatamente fica a opção para retirar esse background ?
       
       
      site: http://outletanaliafran.co
    • By Marcus Roberto
      Fala Galera! Sou bem leigo em html e css, e estou com uma dúvida que pode ser simples, mas realmente estou tendo dificuldades.
       
      Fiz um site de casamento para minha irmã usando o wordpress, pela facilidade. O site está pronto, só que no cabeçalho eu gostaria de fazer uma modificação.
      Vou deixar um print para vocês verem o cabeçalho. O que acontece é que eu coloquei a imagem logo lá pelo painel do wordpress mesmo, só que ficou estranho o contraste com o branco de fundo. Gostaria de saber se há alguma maneira de deixar todo o fundo do cabeçalho com o mesmo fundo da imagem logo. Se sim, em qual arquivo tenho que ir? o header.php ou o styles.css? E o que devo procurar? Pois eu ja tentei ir no arquivo header.php e colocar no <body> o mesmo fundo da logo, usando background-image:url(), mas não funcionou, acho que não é desse modo. 
       
      Se puder me ajudar por favor, obrigado!
       
      LINK DO PRINT: https://ibb.co/icAKUx
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.