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 AlanB.
      Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.
       
      Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 
    • By lucazbrandao
      Olá comunidade, 
       
      No site que estou desenvolvendo eu criei um background com 3 imagens, top, bottom e center, ambas tem 1920 de largura.
      Meu código:
      body { width: 100%; background: url(../images/top-fon-bg.jpg) top center no-repeat, url(../images/bottom-fon-bg.jpg) bottom center no-repeat, url(../images/fon-repeat.jpg) center repeat-y; background-color: #000000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #7d7d7d; line-height: 1; min-height: 100vh; } O problema é que a imagem do centro não fica centralizada, parece que ela se move 1 pixel pro lado.
       
       
       
      Alguém sabe o que pode ser? Obrigado.

    • 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
×

Important Information

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