Jump to content
kaayasinho

Slide que troca imagem por css

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites

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.

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

×

Important Information

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