1

Hola, tengo el siguiente inconveniente: Tengo un home en un sitio web que tiene una imagen de fondo. Me gustaría que cada cierto ciclo de tiempo esta imagen cambie por otra. Lo que estoy probando es:

 $(function(){  
            var imagen = document.getElementById("home");

            console.log(imagen.style.backgroundImage)
           // esta consola me dice que la estructura IF a continuacion, es verdadera y entra correctamente al ciclo.

            if(  imagen.style.backgroundImage == 'url("images/header-bg.jpg")' ) {
                setTimeout(() => {

                imagen.style.backgroundImage = 'url("/images/header-bg2.jpg")';

            }, 100);
            } else{
                setTimeout(() => {

                imagen.style.backgroundImage = 'url("images/header-bg.jpg")';

            }, 100);
            }       

        })

Eso no me está funcionando, las imagenes efectivamente existen, nombre y ruta es correcto, pero no las intercambia. Asimismo me gustaria que el ciclo fuera infinito mientras el sitio esta abierto, pero primero deberia encontrar la forma que funcione el cambio. Cualquier sugerencia es agradecida.

1
  • Cabe aclarar que seria mas simple agregar un carousel o un slider, pero en principio la idea es aprender a cambiar la imagen sin necesidad de agregar algo así
    – Agustin G.
    el 6 jun. 2020 a las 19:10

1 respuesta 1

1

Esto lo podrías lograr también con CSS. Usando animation y un poco de ajustes a los @keyframes. Puedes leer la documentación aquí

Un ejemplo:

html, body {
  height: 100%;
}
h1 {
  color: white;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 2;
}

.background-container {
  position: relative;
  background-color: black;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.background-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  animation: backgroundAnimation 9s linear infinite;
}
@keyframes backgroundAnimation {
  0% {background-image: url("https://images.unsplash.com/photo-1591568538533-bf1d0fb80e25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&h=1200&q=80");opacity: 0;}
  2% {opacity: 1;}
  33% {opacity: 1;}
  35% {background-image: url("https://images.unsplash.com/photo-1591568538533-bf1d0fb80e25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&h=1200&q=80");opacity: 0;}
  37% {background-image: url("https://images.unsplash.com/photo-1591562821999-119734a7ab3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&h=1200&q=80");opacity: 1;}
  65% {opacity: 1;}
  67% {background-image: url("https://images.unsplash.com/photo-1591562821999-119734a7ab3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&h=1200&q=80");opacity: 0;}
  69% {background-image: url("https://images.unsplash.com/photo-1591562843644-f2b400149c8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&h=1200&q=80");opacity: 1;}
  99% {background-image: url("https://images.unsplash.com/photo-1591562843644-f2b400149c8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&h=1200&q=80");opacity: 1;}
  100% {background-image: url("https://images.unsplash.com/photo-1591562843644-f2b400149c8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&h=1200&q=80");opacity: 0;}
}
<div class="background-container">
  <div class="background-animation"></div>
  <h1>Animation</h1>
</div>

Es importante que las imágenes tengan el mismo tamaño.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.