Carrusel de imágenes
Un sencillo carrusel de imagen manual y automático. Es decir, se trata de un ejemplo para que una lista e imágenes se muestren una por una, en orden creciente o decreciente
Se usan variables globales por simplicidad
Solución
<script>
function cambio( sen){
let carrusel = document.getElementById('centro');
carrusel.contador+= sen;
if ( carrusel.contador == carrusel.lista.length){
carrusel.contador = 0;
}
else if ( carrusel.contador < 0) {
carrusel.contador = carrusel.lista.length-1;
}
carrusel.src = carrusel.lista[carrusel.contador]
}
function reset(){
let carrusel = document.getElementById('centro');
carrusel.lista = new Array(
'/ejemplos/scripts/tests/1.jpg',
'/ejemplos/scripts/tests/2.jpg',
'/ejemplos/scripts/tests/3.jpg' ,
'/ejemplos/scripts/tests/4.jpg');
carrusel.contador = 0;
carrusel.tempor = null;
parar();
carrusel.src = carrusel.lista[0]
}
function parar(car){
let carrusel = document.getElementById('centro');
if( carrusel.tempor!=null)
clearTimeout(carrusel.tempor);
}
function automat(tiempo, inc=1)
{
let carrusel = document.getElementById('centro');
clearTimeout(carrusel.tempor);
cambio(inc);
carrusel.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)"> < </div>
<div class="flechas" onclick="parar()">
<img id="centro" src="" alt="">
</div>
<div class="flechas" onclick="cambio(1)"> > </div>
<div class="ctrl">
<div class="auto" onclick="automat(1000,-1)">< </div>
auto
<div class="auto" onclick="automat(1000, 1)"> ></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ágenes automat(miliseg, sen). Llama a la función cambio() a intervalos de tiempo marcados por el primer argumento y en el sentido indicado por el segundo argumento 1: adelante, -1 atrás.
La temporización se hace con setTimeoutl() que como ves utiliza 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.