Publicado em 13 de ago.

Slide que troca imagem por css

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!

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Sergio Tomas· 13 de ago.

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

</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.