pase de fotos automatico javascript
.carousel {
max-width: 800px;
margin: 0 auto;
display: flex;
}
#imagen {
width: 100%;
height: 400px;
background-size: cover;
}window.onload = function () {
// Variables
const IMAGENES = [
'img/montanya.jpg',
'img/parque.jpg',
'img/palmeras.jpg'
];
const TIEMPO_INTERVALO_MILESIMAS_SEG = 1000;
let posicionActual = 0;
let $botonRetroceder = document.querySelector('#retroceder');
let $botonAvanzar = document.querySelector('#avanzar');
let $imagen = document.querySelector('#imagen');
let $botonPlay = document.querySelector('#play');
let $botonStop = document.querySelector('#stop');
let intervalo;
// Funciones
/**
* Funcion que cambia la foto en la siguiente posicion
*/
function pasarFoto() {
if(posicionActual >= IMAGENES.length - 1) {
posicionActual = 0;
} else {
posicionActual++;
}
renderizarImagen();
}
/**
* Funcion que cambia la foto en la anterior posicion
*/
function retrocederFoto() {
if(posicionActual <= 0) {
posicionActual = IMAGENES.length - 1;
} else {
posicionActual--;
}
renderizarImagen();
}
/**
* Funcion que actualiza la imagen de imagen dependiendo de posicionActual
*/
function renderizarImagen () {
$imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
}
/**
* Activa el autoplay de la imagen
*/
function playIntervalo() {
intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
// Desactivamos los botones de control
$botonAvanzar.setAttribute('disabled', true);
$botonRetroceder.setAttribute('disabled', true);
$botonPlay.setAttribute('disabled', true);
$botonStop.removeAttribute('disabled');
}
/**
* Para el autoplay de la imagen
*/
function stopIntervalo() {
clearInterval(intervalo);
// Activamos los botones de control
$botonAvanzar.removeAttribute('disabled');
$botonRetroceder.removeAttribute('disabled');
$botonPlay.removeAttribute('disabled');
$botonStop.setAttribute('disabled', true);
}
// Eventos
$botonAvanzar.addEventListener('click', pasarFoto);
$botonRetroceder.addEventListener('click', retrocederFoto);
$botonPlay.addEventListener('click', playIntervalo);
$botonStop.addEventListener('click', stopIntervalo);
// Iniciar
renderizarImagen();
} <div class="carousel">
<button id="retroceder">Retroceder</button>
<div id="imagen"></div>
<button id="avanzar">Avanzar</button>
</div>
<div class="controles">
<button id="play">Play</button>
<button id="stop" disabled>Stop</button>
</div>