JavaScript: carrusel de imágenes

Carrusel de imágenes

El script

Como funciona

var lista = new Array('1.jpg', '2.jpg', '3.jpg' , '4.jpg');
var contador = 0;
var tiempo = 0;
var tempor = null;
function cambio(sen)
{
contador+= sen;
if (contador ==lista.length)
     contador = lista.length-1;
else
    if (contador < 0) contador = 0;
        document.images.centro.src = lista[contador]
window.status="Imagen número "+contador
}
function reset()
{
contador = 0;
fin = false;
document.images.centro.src = lista[0]
}
function automat(seg)
{
tiempo = parseInt(seg);
reset();
window.status="Pase automático";
if (isNaN(tiempo) || tiempo <= 0)
    alert("Error en el tiempo")
else
    tempor = setTimeout("pasar()", tiempo)
}
function parar()
{
clearTimeout(tempor);
}
function pasar()
{
cambio(1);
if (contador < lista.length-1)
    tempor = setTimeout("pasar()", tiempo)
}

Esta colección de funciones te permitirá poner en tu página un proyector de imágenes con el que el visitante puede ir viendo una por una todas las imágenes de una serie. El sistema permite que sea el visitante el que vaya avanzando o retrocediendo por la colección de imágenes o bien puede usar un modo automático con el que las imágenes van cambiando cada cierto tiempo. Muy útil para galerias de fotos, por ejemplo.

El script lo que hace es recorrer de forma controlada una lista con las direcciones de las imágenes que quieras mostrar, lista que se implementa como un Array. Para recorrerla se usa la función cambio(sen), en la que el argumento indica si vamos hacia adelante o hacia atrás. Esta función se ejecuta al pulsar sobre los correspondientes links que se colocan en la página.
La otra función importante es la del cambio automático de imágnes, la función automat(miliseg). Ésta tan sólo inicia un temporizador que llama a la función pasar() con el intervalo de tiempo indicado en el argumento. La función parar() se usa para detener el cambio automático de las imágenes deteniendo el temporizador.
La función reset() tan sólo reinicia las variables globales y coloca la imagen inicial. Las variables globales usadas son la lista de imágenes, un contador para recorrer la lista, la variable tiempo para almacenar el intervalo para el cambio automático de las imágenes y tempor para almacenar el temporizador.

La página

Como se usa

<body color ="#FFFFFF">
<table width="82%" border="0" align="center">
<tr>
<td width="30%" align="right" height="247"><font color="#0033CC"><b>
<a href="javascript:cambio(-1)">atras</a>
</b></font></td>
<td align="center" width="48%" height="247"><img id="centro" src="1.jpg" height="170"></td>
<td width="22%" height="247"><font color="#0033CC"><b>
<a href="javascript:cambio(1)">avance</a>
</b></font></td></tr>
<tr>
<td width="30%" align="right"><font color="#0033CC"></font></td>
<td width="48%" align="center"><b><font color="#0033CC">Automático</font></b>
<form name="form1" method="post"
action="javascritp:automat(this.form1.tiempo.value)">
<input type="text" name="tiempo">
<br>
<input type="submit" name="Button" value="Inicio">
<input type="button" name="Button2" value="Parar" onclick="parar()">
</form>
</td>
<td width="22%"><font color="#0033CC"></font></td>
< /tr>
</table>

</body>

Para ilustrar este script esta página usa una tabla con dos filas y tres columnas. En la columna central de la fila superior se encuentra la imagen que irá cambiando, y las celdas laterales contienen los enlaces que llaman a la función cambiar(). Estos enlaces puedes cambiarlos por iconos para mejorar la estética.

En la fila inferior se encuentra el formulario que permitirá al visitante ver el paso de imágenes de forma automática, para ello deberá teclear un número de milisegundos y pulsar el botón inicio, desde ese momento las imágenes irán cambiando solas. Existe un botón para detener el carrusel. Si quieres verla funcionando pulsa aquí