Estoy creando un carrousel de imagenes la cual va presentando las imagenes una a una con un efecto de aumento del brillo y disminusión.
El problema que tengo es que la primera presentación la hace bien pero a partir de la segunda se desmadra y empieza ha hacer cosas raras.
Aquí esta el código:
<html>
<head>
<style type="text/css">
#0 {FILTER: alpha(opacity=0)}
#1 {FILTER: alpha(opacity=0)}
#2 {FILTER: alpha(opacity=0)}
#3 {FILTER: alpha(opacity=0)}
</style>
<script language="JavaScript1.2">
var brilloMax=100 // Brillo maximo de la imagen
var brilloMin=0 // Brillo minimo de la imagen
var velocidadUp=10 // Velocidad aumento del brillo
var velocidadDown=10 // Velocidad disminución del brillo
var intervaloBrilloUp=1 // Aumento del brillo
var intervaloBrilloDown=1 // Disminución del brillo
var esperaInicio=2000 // Espera al inicio de una imagen
var esperaFin=2000 // Espera al final de una imagen
var imagenArray = new Array ("1.jpg", "2.jpg", "3.jpg" );
var elementos = imagenArray.length-1 // Total de imagenes
var objeto = new Image(); // Se crea objeto del tipo imagen
var intervaloUp = new Array();
var intervaloDown = new Array();
var activo = new Array();
var elemento;
function inicio()
{ objeto[0]=document.getElementById("0");
objeto[1]=document.getElementById("1");
objeto[2]=document.getElementById("2");
objeto[3]=document.getElementById("3");
elemento=0;
for (var a=0; a<=elementos; a++)
{ activo[a]=0;
}
obtener();
}
function obtener()
{
if (elemento<=elementos)
{ intervaloUp[elemento]=setInterval("alphaUp("+elemento+")",velocidadUp);
setTimeout("obtener()",esperaInicio);
elemento++;
}
else
elemento=0;
}
function alphaUp(pos)
{ if (activo[pos]==0)
{ if (objeto[pos].filters.alpha.opacity==brilloMax)
{ clearInterval (intervaloUp[pos]);
activo[pos]=1;
setTimeout ("intervaloDown["+pos+"]=setInterval('alphaDown("+pos+")',velocidadDown)", esperaFin);
}
else
objeto[pos].filters.alpha.opacity+=intervaloBrilloUp;
}
}
function alphaDown(pos2)
{ if (activo[pos2]==1)
{ if (objeto[pos2].filters.alpha.opacity==brilloMin)
{ clearInterval (intervaloDown[pos2]);
activo[pos2]=0;
if (window.intervaloDown[elementos])
{
obtener();
}
}
else
objeto[pos2].filters.alpha.opacity-=intervaloBrilloDown;
}
}
</script>
</head>
<body onload="inicio()">
<div align="center">
<center>
<table border="0" width="239" cellpadding="0" cellspacing="0">
<tr>
<td width="10"> <img id="0" border="0" src="1.jpg" width="114" height="76" ></td>
<td width="10"> <img id="1" border="0" src="2.jpg" width="114" height="94" ></td>
<td width="10"> <img id="2" border="0" src="4.jpg" width="114" height="76" ></td>
<td width="10"> <img id="3" border="0" src="5.jpg" width="114" height="76" ></td>
</tr>
</table>
</center>
</div>
</body>
</html>
