У меня есть полноэкранное слайд -шоу из четырех изображений (в массиве), которое загружается/начинается с случайного изображения, затем проходит через остальные изображения с Fade Ins. Моя проблема в том, что Fade INS не исчезает по предыдущему изображению, но исчезает из белого (или цвет фона, если/при добавлении). Я бы хотел, чтобы кроссфейд, в котором новое изображение и текущее изображение плавно исчезают и вытекают соответственно, но я в растерянности. Я могу создать слайд -шоу по перекрестному фармату без случайной отправной точки, поэтому я знаком с JavaScript с CSS, но код JavaScript, который я сшил вместе для добавленного случайного старта, меня пролетел. Я проводил часы на переполнение стека, пережив аналогичные проблемы, но ни один из них не выполнил работу. Мое невежество в JavaScript, безусловно, является проблемой, но я обычно достаточно способен сделать то, что мне нужно, чтобы сделать. Любая помощь высоко ценится, с JS Fiddles и или или заметки, если это возможно. Заранее спасибо, код следующим образом: < /p>
Код: Выделить всё
const images = [
"hero-1.jpg",
"hero-2.jpg",
"hero-3.jpg",
"hero-4.jpg",
];
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