pase de fotos automatico javascript
.carousel {
max-width: 800px;
margin: 0 auto;
display: flex;
}
#imagen {
width: 100%;
height: 400px;
background-size: cover;
}pase de fotos automatico javascript
.carousel {
max-width: 800px;
margin: 0 auto;
display: flex;
}
#imagen {
width: 100%;
height: 400px;
background-size: cover;
}pase de fotos automatico javascript
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();
}pase de fotos automatico javascript
<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>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
