4

Подскажите пожалуйста, как можно сделать плавную смену картинки через Js. Есть массив с ссылками на картинки, я его перебираю и каждые несколько секунд меняю картинку. Картинка меняется очень резко, как сделать что бы картинка менялась с плавной анимацией?

  setInterval(() => {
    document.getElementById('image').src = '...';
  }, 5000);

Попробовал добавить:

document.getElementById('img').style.transform = 'scale(.5)';

Всё равное очень резкая смена картики.

7
  • надо в css копаться, попробуйте добавить transition: transform 1s ease;. https://html5book.ru/css3-transition/ , пример 9 дек 2019 в 6:34
  • не вижу в вашем ответе воспроизводимого примера, как минимум, так же попробуйте вообще сделать это с transition, вы будете не очень приятно удивлены
    – meine
    9 дек 2019 в 8:06
  • 1
    Можно в css добавить 2 класса, у которого будет animation, с opacity: 0, до opacity: 1 и с opacity: 1, до opacity: 0; Нужно добавить класс, который скроет картинку, дождаться скрытия, добавить новую картинку(у неё opacity всё ещё 0), и потом убрать старый класс анимации и добавить новый (c opacity: 0, до opacity: 1). Такое решение мне в голову пришло, возможно, можно лучше 9 дек 2019 в 8:15
  • 2
    Мне почему-то кажется, что по ссылке не совсем тот эффект, который просил топикстартер.
    – A K
    9 дек 2019 в 8:46
  • 1
    На будущее: плавная анимация возможна только для свойств, у которых в принципе вычислимо промежуточное состояние. Например, цвет текста или фона, размеры, угол поворота. Если промежуточных состояний быть не может, то и анимации не будет - например, для свойства display (а как бы вы представили промежуточное состояние между display:none и display:block?) или background-image (было url('../my_img.jpg'), стало url('/images/new_file.png'), что должно быть средним для этих двух значений?). 10 дек 2019 в 14:31

2 ответа 2

8

Здесь Вам поможет css-анимация - ставите её выполнение с задержкой, и тогда смена картинок будет как бы за кадром:

const imgLinks = [
    'https://avatars.mds.yandex.net/get-pdb/1938028/784eed94-7c15-41d9-a840-20dab5c4fea4/s1200',
    'https://im0-tub-ru.yandex.net/i?id=cb4c49c8fb8de5ec0f97bf19dcd2cc63-l&n=13',
    'https://im0-tub-ru.yandex.net/i?id=352b3763bff8a32c6b95ef1263b19c6f-l&n=13'
];
const delay = 5000;
let currentIndex = 0;
setInterval(function() {
    document.getElementById('image').src = imgLinks[currentIndex];
    currentIndex++;
    if(currentIndex >= imgLinks.length) {
        currentIndex = 0;
    }
}, delay);
#image {
  max-width: 100%;
  animation: fade 5s linear infinite;
  animation-delay: 2.5s;
}
@keyframes fade {
  0% { opacity: 1 }
  50% { opacity: 0 }
  100% { opacity: 1 }
}
<img src="https://im0-tub-ru.yandex.net/i?id=352b3763bff8a32c6b95ef1263b19c6f-l&n=13" alt="" id="image" />

4
  • Красивый эффект, залип и смотрю.
    – A K
    9 дек 2019 в 8:31
  • @AK, мне кажется, фэйды во всех слайдерах устроены каким-то подобным образом :) 9 дек 2019 в 8:33
  • Не знал, что можно только одной анимацией и без добавления классов в js сделать, прикольно! 9 дек 2019 в 8:33
  • мне тоже этот ответ помог - спасибо 12 мар 2021 в 12:28
5

Сниппет в предыдущем ответе у меня работает некорректно, к сожалению (из-за долгой прогрузки картинок)... так что вот еще один - с прелоадом на событиях, кастомизацией переходов in/out в CSS, и т.д.:

initImg('#test img', [
  'https://picsum.photos/id/1001/800/300', 
  'https://picsum.photos/id/1002/800/300', 
  'https://picsum.photos/id/1006/800/300', 
  'https://picsum.photos/id/1004/800/300', 
  'https://picsum.photos/id/1005/800/300'
]); 

function initImg(selector, srcArr) {
  const img = document.querySelector(selector); 
  Object.assign(img, {
    buf: Object.assign(new Image(), { img }), 
    srcArr: [...srcArr], 
    changeInterval: 5e3,
    bufIdx: 0,
    change: function () {
      this.style.animationName = 'img-in'; 
      this.src = this.buf.src || this.nextImage(); 
      this.buf.src = this.nextImage(); 
    }, 
    nextImage: function () {
      this.bufIdx = ++this.bufIdx < this.srcArr.length ? this.bufIdx : 0;
      return this.srcArr[this.bufIdx];
    }
  }); 
  img.buf.addEventListener('load', loadHandler); 
  img.addEventListener('animationend', animEndHandler); 
  img.change(); 
  return img; 

  function loadHandler() {
    setTimeout(
      () => this.img.style.animationName = 'img-out', 
      this.img.changeInterval 
    ); 
  }
  function animEndHandler({ animationName }) {
    if (animationName === 'img-out') 
      this.change(); 
  }
}
#test { max-width: 800px; margin: 0 auto; overflow: hidden; }
#test img { max-width: 100%; animation: none 2s linear forwards; }

@keyframes img-in {
    0% { filter: grayscale(100%); opacity: 0; transform: scale(1.05); }
   50% { filter: grayscale(100%); opacity: 1; transform: scale(1); }
  100% { filter: grayscale(0); }}
@keyframes img-out {
    0% { filter: grayscale(0); opacity: 1; transform: scale(1); }
   30% { filter: grayscale(100%); }
  100% { filter: grayscale(100%); opacity: 0; transform: scale(1.05); }}
<div id="test">
  <img>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.