Secuencia de imágenes

Creación de una secuencia a partir de un párrafo con varias imágenes, es decir que partimos de una estructura de elementos totalmente accesible. La única modificación a realizar en el párrafo es agregarle un atributo id (en este caso "Ejemplo"), para poder seleccionarlo desde la hoja de estilos o el script. Por lo demás es un párrafo normal y corriente, con imágenes normales y corrientes. El script que se encarga del efecto de secuencia está formado por una comprobación previa y dos funciones:

if (document.implementation) {
  document.write('<link rel="StyleSheet" href="secuencia.css" media="screen" type="text/css" />');
  var Contador = 0;
  var Imagenes;
}
 
function Iniciar() {
  if (!document.implementation) return;
  Imagenes = document.getElementById('Ejemplo').getElementsByTagName('img');
  Imagenes[0].style.display='inline';
  setInterval('Secuencia()', 750);
}
 
function Secuencia() {
  Imagenes[Contador%Imagenes.length].style.display='none';
  Contador++;
  Imagenes[Contador%Imagenes.length].style.display='inline';
}

La hojas de estilos referida en el script sólo precisa de una regla:

#Ejemplo img { display:none; }

Por su parte, la función Iniciar() es invocada desde el atributo onload del body. Hay que tener en cuenta que la comprobación inicial, que decide si se aplica el efecto o no, es quizás demasiado exigente, y puede refinarse para permitir más entornos.

I.D.O. originada a partir del mensaje Cambiar una imagen cada x segundos publicado en el grupo e.c.i.w.paginas-web.