Carrusel de imágenes

Un sencillo carrusel de imagen manual y automático.

Se usan variables globales por simplicidad

Solución

<script>

var lista = new Array('scripts/tests/1.jpg','scripts/tests/2.jpg', 'scripts/tests/3.jpg' , 'scripts/tests/4.jpg');

var contador = 0;

var tempor = null;

function cambio(sen)

{

    contador+= sen;

    if (contador ==lista.length)

        contador = 0;

    else  if (contador < 0)

        contador = lista.length-1;

    document.images.centro.src = lista[contador]

    window.status="Imagen número "+contador

}

function reset()

{

    contador = 0;

    parar();

    document.images.centro.src = lista[0]

}

function parar()

{

if(tempor!=null)

    clearTimeout(tempor);

}

function automat(tiempo, inc=1)

{

    cambio(inc);

    tempor = setTimeout(automat, tiempo, tiempo, inc)

}

</script>

<style>

.flechas, .imgs, .auto{display:inline-block}

.flechas{padding:0 10px; font-size:50px; font-weight:bold; vertical-align:middle}

.flechas:hover, .auto:hover{cursor:pointer}

.auto{font-size:30px; padding: 0 8px; font-weight:bold; vertical-align:middle}

.ctrl{font-size:20px;padding: 0 10px}

</style>

<body onload="reset()">

<div style="text-align:center">

<div class="flechas" onclick="cambio(-1)"> &lt; </div>

<div class="flechas" onclick="parar()"><img id="centro" src="" alt=""></div>

<div class="flechas" onclick="cambio(1)"> &gt; </div>

<div class="ctrl">

<div class="auto" onclick="automat(1000,-1)">&lt; </div>

auto

<div class="auto" onclick="automat(1000, 1)"> &gt;</div>

</div>

</div>

</body>

Explicación

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 recorrer la lista se usa la función cambio(sen), en la que el argumento indica si vamos hacia adelante (1) o hacia atrás (-1). 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 automat(miliseg, sen). Llama a la función cambio() a intervalos de tiempo marcados por el argumento primero y en el sentido indicado por el segundo argumento 1: adelante, -1 atrás.

La temproización se hace con setTimeInterval() que como ves arrastra los argumentos tiempo, inc . El pimero mantiene el valor del intervalo de llamada de la función y el segundo el sentido del movimiento.

La función parar() se usa para detener el cambio automático de las imágenes deteniendo el temporizador. Se activa al pulsar sobre la imagen

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 y la variable tempor para almacenar el temporizador.

Como lo uso

 Para ilustrar este script esta página usa tres bloques div con estilos definidos para mostrarlos como bloques inline: flecha izquierda, imagen y flecha derecha. El evento cllick sobre las flechas se asignan al evento cambio(inc), el argumento inc será 1 o -1 según sea la flecha derecha o izquierda.

El evento click sobre la imagen se asigna al evento parar

Bajo los bloque de imagen y flechas, he colocado otro conjunto de bloques div para colocar las flechas del paso automático. Los eventos click sobre estas flechas se vinculan a la función automat(), de intervalo de tiempo y sentido del movimiento

Las flechas se construyen con los caracteres mayor que y menor que. Pueden cambiarse por iconos.