Плавная смена картинки через атрибут src js

19 декабря 2021, 00:50

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

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

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

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

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

Answer 1

Здесь Вам поможет 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" />

Answer 2

Сниппет в предыдущем ответе у меня работает некорректно, к сожалению (из-за долгой прогрузки картинок)... так что вот еще один - с прелоадом на событиях, кастомизацией переходов 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Загрузить файл в input[file] по ссылке на кариинку

Как мне, зная ссылку на файл, (например, http://host/filepath/filenamepng) загрузить его в input[file] для отправки на сервер?

119

javascript

JS не видит элементы, созданные им ранее

Делаю корзину онлайн магазинаВ правом верхнем углу у меня корзина, куда заносятся купленные товары

162

javascript

Использование тайлов Google Maps в leaflet js

Мне нужно отображать геопозицию агента на карте в своей CRM системеМогу ли я использовать Google Maps тайлы в leaflet JS в коммерческом продукте? Я подключаю...

185

javascript

форма регистрации пользователя

почему не читается свойство password при загрузке в правиле confirmPasswordRules?

105