Ir para conteúdo
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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 


 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Editado por Maujor
Alterações na JS e CSS do Fiddle

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por 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.
       




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

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.