Problema con un pase de imágenes
Publicado por Alex-8 (1 intervención) el 25/07/2011 21:07:12
Hola a todos:
Me ha surgido un pequeño contratiempo con una presentación de imágenes con efecto fundido (fade creo que se llama):
Tengo un código en el que cinco imágenes (o1, 02, ... 05) van apareciendo automáticamente una tras otra con un efecto de fundido entre ellas. El problema es que tarda mucho (unos 12 segundos) hasta que se produce el primer cambio de imagen. Y lo más curioso es que no empieza por la imagen 01, sino que al empezar, ya aparece en pantalla la imagen 05. Cuando después de 12 segundos, comienza a funcionar, pasa un instante a la imagen 04; de nuevo vuelve a la 05 y luego ya pasa a la 01 para seguir con normalidad.
He revisado todo varias veces pero no encuentro el error que motiva esto.
Pego aquí debajo el código por si alguien del foro puede ayudarme. Me interesa mucho este efecto porque he visto funciona con los navegadores más conocidos (IE, Mozilla, Chrome y Safari).
----------------------------------------------------------------------------
<htlm>
<head>
<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener("l oad",so_init,false):window.attachEvent("onload",so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById("imageContainer").getElementsByTa gName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,3000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
//]]>
</script>
<style>
#imageContainer {
position: relative;
}
#imageContainer {
height: 700px;
width: 350px;
}
#imageContainer img {
left:0;
position: absolute;
top:0;
}
</style>
</head>
<body>
<div id="imageContainer">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>
</body>
</html>
----------------------------------------------------------------------------------
Os anticipo las gracias. Saludos.
Alex-8
Me ha surgido un pequeño contratiempo con una presentación de imágenes con efecto fundido (fade creo que se llama):
Tengo un código en el que cinco imágenes (o1, 02, ... 05) van apareciendo automáticamente una tras otra con un efecto de fundido entre ellas. El problema es que tarda mucho (unos 12 segundos) hasta que se produce el primer cambio de imagen. Y lo más curioso es que no empieza por la imagen 01, sino que al empezar, ya aparece en pantalla la imagen 05. Cuando después de 12 segundos, comienza a funcionar, pasa un instante a la imagen 04; de nuevo vuelve a la 05 y luego ya pasa a la 01 para seguir con normalidad.
He revisado todo varias veces pero no encuentro el error que motiva esto.
Pego aquí debajo el código por si alguien del foro puede ayudarme. Me interesa mucho este efecto porque he visto funciona con los navegadores más conocidos (IE, Mozilla, Chrome y Safari).
----------------------------------------------------------------------------
<htlm>
<head>
<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener("l oad",so_init,false):window.attachEvent("onload",so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById("imageContainer").getElementsByTa gName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,3000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
//]]>
</script>
<style>
#imageContainer {
position: relative;
}
#imageContainer {
height: 700px;
width: 350px;
}
#imageContainer img {
left:0;
position: absolute;
top:0;
}
</style>
</head>
<body>
<div id="imageContainer">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>
</body>
</html>
----------------------------------------------------------------------------------
Os anticipo las gracias. Saludos.
Alex-8
Valora esta pregunta
0