Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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.
 

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.

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

  • Conteúdo Similar

    • Por jacquesvaladares
      Como inserir uma imagem como background em uma célula de tabela. Fiz um exemplo simples q apresento abaixo.
       
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
        <meta http-equiv="content-type"
       content="text/html; charset=ISO-8859-1">
        <title>Teste de imagem na celula da tabela</title>
      <!--&#8211; I N I C I O C S S &#8211;-->
        <style type="" text/css="">
      .imagem{
      background: url(liz.png) no repeat;
      }
        </style><!--&#8211; F I M C S S &#8211;-->
      </head>
      <body>
      <table
       style="width: 100%; height: 450px; text-align: left; margin-left: auto; margin-right: auto;"
       border="2" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="height: 50%; width: 50%;"><class
       ="imagem"></class></td>
            <td
       style="height: 50%; width: 50%; background-color: rgb(255, 255, 204);"></td>
          </tr>
          <tr>
            <td
       style="height: 50%; width: 50%; background-color: rgb(51, 102, 255);"></td>
            <td
       style="height: 50%; width: 50%; background-color: rgb(51, 255, 51);"></td>
          </tr>
        </tbody>
      </table>
      <br>
      </body>
      </html>
       

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

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

Informação importante

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