Buena tarde, ojalá puedan ayudarme.
Quiero hacer lo sig: que la imagen de
background cambie aleatoriamente cada
x tiempo, y que la transición entre imágenes tenga el efecto
fade. Eso es todo.
El siguiente código funciona para la parte de que el background cambie cada 3 segundos de forma aleatoria.
Código Javascript
:
Ver originalsetInterval( function()
{
var numColorAleatorio = Math.floor( Math.random()*6 );
document.getElementById("body").style.backgroundImage = 'url(fondo_0' + numColorAleatorio + '.jpg)';
}, 3000);
</script>
La bronca está con lo del efecto
fade.
Googleando me encontré con este sitio:
http://www.disegnocentell.com.ar/notas2.php?id=203, en el cual hay un javascript para hacer el efecto FADE-in y FADE-out a una imagen.
Le he movido por todos lados para adecuarlo a mis necesidades, pero no logro hacerlo funcionar como deseo. Aquí les pongo lo que llevo hasta el momento. No logro avanzar más. El sig código hace casi lo que necesito, con la diferencia que el efecto
fade lo hace sólo entre la 1ra y 2da imágenes, no al resto. Pongo de una vez todo el código del archivo para evitarles la molestia del
copy-paste por partes.
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> html, body {width:100%; height:100%;}
function set_opacity(div, value) {
div.style.opacity = value;
div.style.MozOpacity = value;
div.style.KhtmlOpacity = value;
div.style.filter = 'alpha(opacity=' + value*100 + ')';
div.style.zoom=1;//necesario para Explorer
}
var transicion=function(inicio,fin,segundos){
var _this=this;
this.test=0;
if(_this.intervalo)clearInterval(_this.intervalo);
if(this.val && Math.abs(fin-_this.val)<0.01)return;
this.val=!this.val?inicio<1?inicio+.0001:inicio:this.val;
set_opacity(this, this.val);
this.pasos=(fin-inicio)/100;
this.pausa=segundos*10;
this.intervalo=setInterval(
function(){
if(_this.test>99 || Math.abs(fin-_this.val)<0.01){
clearInterval(_this.intervalo);
}
_this.test++;
//document.getElementById("log").innerHTML=_this.test;
_this.val=_this.val+_this.pasos;
if(_this.val<=.01)
_this.style.display='none';
else
_this.style.display='block';
set_opacity(_this, _this.val);
},this.pausa);
}
function ver(){
var obj=document.getElementById("fondo");
transicion.call(obj,0,1,3);
// setTimeout( cerrar(), 4000); //Entiendo que debería funcionar la función cerrar() 4 segundos después que termina de ejecutarse la función ver(), pero no pasa así.
}
function cerrar(){
var obj=document.getElementById("fondo");
transicion.call(obj,1,0,3);
}
/* *****************************************************************************************
*****************************************************************************************
**** El siguiente código hace que se cambie aleatoriamente de background, pero el ****
**** FADE sólo funciona entre la 1ra y 2da imágenes. Al resto no les pone FADE. ****
*****************************************************************************************
***************************************************************************************** */
setInterval( function()
{
ver();
var numColorAleatorio = Math.floor( Math.random()*6 );
document.getElementById("fondo").style.backgroundImage = 'url(fondo_0' + numColorAleatorio + '.jpg)';
}, 3000);
<div id="fondo" style="position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(fondo_01.jpg)">
