Ir para conteúdo

Arquivado

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

kaayasinho

Slide que troca imagem por css

Por , em Javascript

Recommended Posts

kaayasinho    0

kaayasinho
Postado

e ai tudo certo?

 

Estou com uma duvida q não encontrei ainda como solucionar.

 

Eu tenho um background no meu site que coloquei pelo CSS, por motivos de estrutura e conflitos que estava dando pelo HTML.

 

é possivel eu colocar um slide no css? ou seja o Jquery busca as imagens que ja predefino e vai mudando aleatoriamente.

 

 

A estrutura é mais ou menos assim

<style>
#fundo{
background:url(imagem.jpg) no-repeat fixed;
}
</style>


<body>

<div id="fundo"></div>

</body>

Resumindo,

Preciso fazer um slide de fotos passar alterando a imagem de fundo do CSS, e não do HTML.

Obrigado!

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sergio Tomas    16

Sergio Tomas
Postado

Boa tarde Kaayasinho, você pode fazer isso da seguinte maneira:

<style>
#fundo{}
#fundo.slide1{background:url(imagem1.jpg) no-repeat fixed;}
#fundo.slide2{background:url(imagem2.jpg) no-repeat fixed;}
#fundo.slide3{background:url(imagem3.jpg) no-repeat fixed;}
#fundo.slide4{background:url(imagem4.jpg) no-repeat fixed;}

</style>


<body>

<div id="fundo" class="slide1"></div>

</body>

Ai para alterar a imagem do seu fundo é so usar o javascript para trocar a classe do fundo usando um setTimeout.

 

Exemplo:

var fundo = document.getElementById("fundo");
var slideNumber = 1;
var numeroSlides = 4;
setTimout(function(){
      fundo.setAttribute("class", "slide"  + slideNumber);
      //vai para o proximo slide
      slideNumber++;

      //faco uma verificacao que se passaro  numero de slides ele volta para o primeiro
      if(slideNumber > numeroSlides){
          slideNumber = 1;
      }
    
},1000);

A lógica é essa, com JQuery fica muito mais fácil, existem tbm diversos plugins que fazem um slideshow, ai vai depender da sua necessidade e aprendizado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito