Поменяйте изображение через некоторое время - PullRequest
Новая
       0

Поменяйте изображение через некоторое время

0 голосов
/ 19 марта 2020

У меня есть этот код в моем файле css, который содержит изображение, которое будет отображаться на странице about. Есть ли способ установить несколько изображений и иметь таймер, который позволяет изображениям изменяться через определенный промежуток времени? 

.aboutHero {
    background-image" url("./images/palm1.jpg);
    min-height: 60vh;
}

Ответы [ 2 ]

2 голосов
/ 19 марта 2020 

.image-fader {
  width: 300px;
  height: 300px;
}

.image-fader img {
  position: absolute;
  top: 0px;
  left: 0px;
  animation-name: imagefade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

@keyframes imagefade {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.image-fader img:nth-of-type(1) {
  animation-delay: 6s;
}
.image-fader img:nth-of-type(2) {
  animation-delay: 4s;
}
.image-fader img:nth-of-type(3) {
  animation-delay: 2s;
}
.image-fader img:nth-of-type(4) {
  animation-delay: 0;
}
<div class="image-fader">
  <img src="https://dummyimage.com/300x200/f00/fff" />
  <img src="https://dummyimage.com/300x200/0f0/fff" />
  <img src="https://dummyimage.com/300x200/00f/fff" />
  <img src="https://dummyimage.com/300x200/f0f/fff" />
</div
2 голосов
/ 19 марта 2020

Вы можете сделать это, установив простой таймер, который изменяет sr c изображения после определенного количества мс. Вот пример: 

<html>
     <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     </head>
     <body>
          <img class="image" src=""/>
          <script>
               $( document ).ready(function(){
                    let images = [
                         "image 1",
                         "image 2",
                         "image 3",
                    ];
                    var i = 0;
                    window.setInterval(function(){
                         $('.image'). attr("src", images[i]);
                         i = (i==images.length-1) ? 0 : i+1;
                    }, 5000);
               });
          </script>
     </body>
</html>

Обратите внимание, что это написано с использованием JQuery, поэтому вам может потребоваться немного изменить код в зависимости от используемой вами платформы, но логика c такая же .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...