Mi objetivo es agregar la animación fadeIn o fadeOut a la función llamada changePicture(). El problema que encontré es que no sé cómo agregar la animación cada vez que se ejecuta un número de la matriz. Por ejemplo: las imágenes [0] se ejecutan y quiero que la animación se ejecute justo después porque me quedo con el color del degradado lineal (que es una especie de gris) antes de que aparezca otra imagen y se vea horrible. ¡Cualquier ayuda o sugerencia sería apreciada!
let i = 0; let images = []; let slideTime = 3000; images[0] = 'images/banner-bg.jpg' images[1] = 'images/banner-bg2.jpg' images[2] = 'images/banner-bg3.jpg' images[3] = 'images/banner-bg4.jpg' images[4] = 'images/banner-bg5.jpg' function changePicture(){ document.getElementById('banner').style.backgroundImage = "linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url(" + images[i] + ")"; if (i < images.length - 1) { i++; } else { i = 0; } setTimeout(changePicture, slideTime); } window.onload = changePicture;Puede lograr este efecto cambiando la opacidad del elemento de banner .
let i = 0; let images = []; let slideTime = 3000; let animating = null; let animationInterval = 100; let pointer = 1; images[0] = 'images/banner-bg.jpg' images[1] = 'images/banner-bg2.jpg' images[2] = 'images/banner-bg3.jpg' images[3] = 'images/banner-bg4.jpg' images[4] = 'images/banner-bg5.jpg' function fadeout(element, time) { element.style.opacity = 1 - time / slideTime; // for fadein effect -> // element.style.opacity = time / slideTime; } function changePicture() { const banner = document.getElementById('banner'); if (animating) { clearInterval(animating); animating = null; pointer = 1; banner.style.opacity = 1; } banner.style.backgroundImage = "linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url(" + images[i] + ")"; const runAnimation = () => { fadeout(banner, pointer * animationInterval); pointer++; } animating = setInterval(runAnimation, animationInterval); if (i < images.length - 1) { i++; } else { i = 0; } setTimeout(changePicture, slideTime); } window.onload = changePicture;Con suerte, esto funciona para ti 🙏.