Cambiar de BG cada X tiempo

PawKiller · #1 (**permalink**) 19/07/2014, 11:55

Buenas tardes, estoy haciendo una pequeña portada para una web donde el BG (Fondo, BackGround) cambie cada cierto tiempo por sí solo (automático), ya hice que cambiará cada X tiempo de imagen, pero ahora al cambiarlas pues se ve feo por que no tiene ningún tipo de animación, me gustaría saber cómo ponerle alguna animación para que al cambiar la imagen no se vea que parpadea, les dejo el código que encontré en la web, gracias:

Código HTML:

 var numero = 0;
 
   function cambiar() 
   {
      if(numero==0){
         document.body.style.backgroundImage='url(imagenes/1.jpg)';
         numero = 1;
      }else if(numero==1){
         document.body.style.backgroundImage='url(imagenes/2.jpg)';
         numero = 2;
      }else if(numero==2){
         document.body.style.backgroundImage='url(imagenes/3.jpg)';
         numero = 3;
		 }else if(numero==3){
         document.body.style.backgroundImage='url(imagenes/4.jpg)';
         numero = 0;
      }
   }
 
   setInterval("cambiar()",2000);

IsaBelM · #2 (**permalink**) 20/07/2014, 07:43

prueba con este

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Documento sin título</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}

html {
display: block;
}

body {
width: 100%;
height: 100%;
background-color: #BEBFBF;
}

#fondo1, #fondo2 {
position: absolute;
left: 0;
top: 0;
min-width: 700px;
width: 100%;
opacity: 0;
filter: alfa(opacity=0);
}

#contenedor {
width: 100%;
height: auto;
z-index: 99;
background-color: red;
}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, estaImg, contador = 0;
var arrImagenes = [
'http://jonlabiano.files.wordpress.com/2010/02/basket5.jpg',
'http://cousken.files.wordpress.com/2008/04/sabina.jpg',
'http://www.abc.es/Media/201005/13/sabina1--300x300.jpg'
];

window.onload = function(){

nImg = arrImagenes.length;

//precarga
for (var i = 0; i < nImg; i++){
imagenes[i] = new Image();
imagenes[i].src = arrImagenes[i];
}
//precarga
IMG1 = document.getElementById('fondo1');
IMG2 = document.getElementById('fondo2');

fadeIn(1, 0);
}

function fadeIn(kImg, transp){
estaImg = (kImg == 1) ? IMG1 : IMG2;

if(transp==0){
estaImg.src = imagenes[contador++ % nImg].src;
}

estaImg.style.opacity = transp/100;
estaImg.style.filter = 'alpha(opacity =' + transp + ')';
transp = transp + 2.5;
var intervalo = setTimeout(function() {fadeIn(kImg, transp)}, 60);

if(transp >= 100){
clearTimeout(intervalo);
setTimeout(function() {rotarImgs(kImg)}, 1000);
}
}

function rotarImgs(pos){
IMG1.style.zIndex = Math.abs(pos-1);
IMG2.style.zIndex = pos;
pos = (pos == 0) ? 1 : 0;
fadeIn(pos, 0);
}
</script>
</head>
<body>

<img id="fondo1" src="" alt="" />
<img id="fondo2" src="" alt="" />

<div id="contenedor">AQUÍ TODO EL CONTENIDO</div>
</body>
</html>