fondo de pagina autocambiante

[julianskyline]

Hola Amigo, mira yo hace ya un tiempo me tocó buscar ese requerimiento pero no lo podía hacer por JQuery el cual tiene varias opciones para eso por lo tanto decidí ingeniármelas con JavaScript y CSS .

Código:

<style>
   .tipo1 {
   background-image: url("URL IMAGEN 1");
   background-size: 100% 100%;
   font-size: 20px;
   height: 200px;
   width: 700px;
   text-align: center;
   }
   .tipo2{
   background-image: url("URL IMAGEN 2"); 
   background-size: 100% 100%;
   height: 200px;
   width: 700px;
   text-align: center;
   }
   .tipo3{
   background-image: url("URL IMAGEN 3"); 
   background-size: 100% 100%;
   height: 200px;
   width: 700px;
   text-align: center;
   }
   div.transp {  
   opacity: 0.0;
   filter: "alpha(opacity=60)"; 
   filter: alpha(opacity=60);      
   zoom: 1;
   }
</style>

Código HTML:

<script language="javascript">
   function CambiarEstilo() {
       var elemento = document.getElementById("capa-variable");
       if (elemento.className == "tipo1") {
         elemento.className = "tipo2";
       }else if(elemento.className == "tipo2") {
         elemento.className = "tipo3";
       }else{elemento.className = "tipo1"}
   }
</script>
<script language="javascript">
   window.onload = setInterval('CambiarEstilo()',5000);
</script>

<div id="capa-variable" class="tipo1">
      <div id="botones" class="transp">
         <input class="boton" type="button" onclick="javascript:CambiarEstilo();" value="next" />
      </div>
   </div>