Массивы изображений со случайной отправной точкой и Fade INS нуждаются в более плавных переходах ⇐ Html

[Anonymous]

У меня есть полноэкранное слайд -шоу из четырех изображений (в массиве), которое загружается/начинается с случайного изображения, затем проходит через остальные изображения с Fade Ins. Моя проблема в том, что Fade INS не исчезает по предыдущему изображению, но исчезает из белого (или цвет фона, если/при добавлении). Я бы хотел, чтобы кроссфейд, в котором новое изображение и текущее изображение плавно исчезают и вытекают соответственно, но я в растерянности. Я могу создать слайд -шоу по перекрестному фармату без случайной отправной точки, поэтому я знаком с JavaScript с CSS, но код JavaScript, который я сшил вместе для добавленного случайного старта, меня пролетел. Я проводил часы на переполнение стека, пережив аналогичные проблемы, но ни один из них не выполнил работу. Мое невежество в JavaScript, безусловно, является проблемой, но я обычно достаточно способен сделать то, что мне нужно, чтобы сделать. Любая помощь высоко ценится, с JS Fiddles и или или заметки, если это возможно. Заранее спасибо, код следующим образом: < /p>

Код: Выделить всё

const images = [
"https://picsum.photos/id/650/1000",
"https://picsum.photos/id/651/1000",
"https://picsum.photos/id/652/1000",
"https://picsum.photos/id/653/1000",
];

const imgElement = document.getElementById("myImage");

let currentIndex;

function fadeInImage(index) {
imgElement.style.opacity = 0;
imgElement.src = images[index];
let opacity = 0;
imgElement.style.opacity = opacity;

const intervalId = setInterval(() => {
opacity += 0.01;
imgElement.style.opacity = opacity;

if (opacity >= 1) {
clearInterval(intervalId);
}

}, 20);

currentIndex = index;

}

function playImages() {
let randomIndex = Math.floor(Math.random() * images.length);
fadeInImage(randomIndex);

setInterval(() => {
currentIndex = (currentIndex + 1) % images.length;
fadeInImage(currentIndex);
}, 5000);
}

playImages();< /code>
body,
html {
height: 100%;
margin: 0;
padding: 0px;
outline: none;
border: 0px;
}

.homehero {
height: 100%;
}

.homehero img {
height: 100%;
width: 100%;
object-fit: cover;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ransitions