Hola amigos.
En mi opinión la solución es tan fácil como hacer una cascada de funciones, condicionadas por el famoso setTimeout para la ejecución en serie.
Veamos.
Pongamos que queremos realizar un programa en el que participen 5 imágenes, y cada una sustituya a la anterior cada 2 segundos.
Hacemos la cascada de funciones, y llamamos a la primera al cargar la página con el comando "onload='funcion1()'"
Las imágenes se llamarán:
imagen1.jpg
imagen2.jpg
imagen3.jpg
imagen4.jpg
imagen4.jpg
Y estarán alojadas en la misma dirección del *.html para no tener que escribir más caracteres. Cuestión de vaguería, je, je...
La imagen estará identificada mediante un "id". Llamémosle id=imagen. en la primera función no es necesario definir qué imagen va ubicada en dicho contenedor dado que es la que tenemos por defecto, no obstante indicaremos dicha definición mediante un imagen.src="imagen1.jpg"
Haremos una cascada de funciones denominadas
primera()
segunda()
tercera()
cuarta()
quinta()
La función primera sería algo así:
t=0;
function primera(){
imagen.src="imagen1.jpg"
t=t+1;
if(t>=2){segunda();t=0;return}
setTimeout('primera()',1000)
}
La función primera() se ejecutará durante 2000 milisegundos (2 segundos). Pasado este tiempo se cortará el bucle mediante el condicional "if" y se ejecutará segunda(). Ponemos la variable contador "t" a cero para utilizarla en la próxima función.
function segunda(){
imagen.src="imagen2.jpg"
t=t+1;
if(t>=2){tercera();t=0;return}
setTimeout('segunda()',1000)
}
En esta función la imagen imagen1.jpg se ha cambiado a imagen2.jpg. Su permanencia será igualmente de 2 segundos. Entonces pasaremos a la tercera función y con ella a la imagen imagen3.jpg
function tercera(){
imagen.src="imagen3.jpg"
t=t+1;
if(t>=2){cuarta();t=0;return}
setTimeout('tercera()',1000)
}
La cuarta será un clon de las anteriores, cambiando los parámetros de imagen y función.
Llegamos a la quinta. Será idéntica a las anteriores, con la particularidad de que llamaremos a la primera función al finalizar el bucle
function quinta(){
imagen.src="imagen5.jpg"
t=t+1;
if(t>=2){primera();t=0;return}
setTimeout('quinta()',1000)
}
Código HTML:
Ver original
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
t=0;
function primera(){
imagen.src="imagen1.jpg"
t=t+1;
if(t>=2){segunda();t=0;return}
setTimeout('primera()',1000)
}
function segunda(){
imagen.src="imagen2.jpg"
t=t+1;
if(t>=2){tercera();t=0;return}
setTimeout('segunda()',1000)
}
function tercera(){
imagen.src="imagen3.jpg"
t=t+1;
if(t>=2){cuarta();t=0;return}
setTimeout('tercera()',1000)
}
function cuarta(){
imagen.src="imagen4.jpg"
t=t+1;
if(t>=2){quinta();t=0;return}
setTimeout('cuarta()',1000)
}
function quinta(){
imagen.src="imagen5.jpg"
t=t+1;
if(t>=2){primera();t=0;return}
setTimeout('quinta()',1000)
}
<body onload="primera()">
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 192px; top: 47px" id="capa1"> <table border="1" width="100%" id="table1"> <img border="0" src="imagen1.jpg" width="300" height="300" id=imagen></td>