Hola a tod@s,
Quisiera comentar un problema que tengo con JavaScript..
Quisiera programar un sencillo carrusel de imágenes (los efectos visuales de momento los dejo apartados).
El funcionamiento es bastante básico (creo), simplemente cargo en la pantalla todas las imágenes y luego con una función javascript voy modificando cual de ellas se muestra y cual se oculta.
El código HTML es el siguiente:
Código HTML:
<div id="carrusel">
<img src="imagen1.jpg"></img>
<img src="imagen2.jpg"></img>
</div>
El código JavaScript es este otro:
Código PHP:
function changeImagen(vIndex)
{
// Recupero todas las imagenes
var doc = document.getElementById("carrusel");
var images = doc.getElementsByTagName("img");
// Recorro el array
for(var i = 0; i < images.length; i++)
{
// Oculto todas las imágenes
images[i].style.display = "none";
// muestro la imagen que corresponda con la variable vIndex
if(i == vIndex)
{
images[i].style.display = "block";
}
}
// Contador
if(vIndex == images.length - 1)
{
vIndex = 0;
}
else
{
vIndex = vIndex + 1;
}
// Llamo a la funcion con el contador incrementado
window.setTimeout(changeImagen(vIndex),5000);
}
Mi problema está en la última línea del código JavaScript
:
Código PHP:
window.setTimeout(changeImagen(vIndex),5000);
Si ejecuto este código paso a paso, hace exactamente lo que yo quiero (lo hago con el depurador de Chrome) pero si lo ejecuto libremente, la consola de JavaScript me devuelve el error "
Maximum call stack size exceeded", es decir, que he llamado demasiadas veces de manera recursiva a la función.
¿Cómo puedo solventar esto?
Por otro lado, a pesar de que estoy indicando 5000 segundos de retardo en la llamada a la función, el navegador ignora ese parámetro y la llamada la hace inmediatamente....
¿Sabéis por qué puede estar provocado?
Soy algo nuevo en JavaScript y seguro que hay mil cosas que me estoy saltando...
¡Muchas gracias!