Images Array mit zufälliger Ausgangspunkt und Fade Ins benötigt glattere Übergänge ⇐ HTML

[Anonymous]

Ich habe eine Vollbilddispehow von vier Bildern (in einem Array), die in einem zufälligen Bild lädt/beginnt und dann mit dem Rest der Bilder mit FADE INS durchgeht. Mein Problem ist, dass die Fade -Ins nicht über das vorherige Bild verblasst, sondern von Weiß verblasst (oder eine Hintergrundfarbe, wenn/wenn hinzugefügt). Ich hätte gerne eine Kreuzfade, bei der ein neues Bild und das aktuelle Bild reibungslos ein- und ausgeblendet werden, aber ich bin ratlos. Ich kann eine Cross -Diashow ohne zufällige Ausgangspunkt erstellen, daher bin ich mit JavaScript zu CSS vertraut, aber der JavaScript -Code, den ich für den zusätzlichen zufälligen Start zusammengefügt habe, hat mich geschlagen. Ich habe Stunden mit Stack Overflow verbracht, um ähnliche Probleme zu durchlaufen, aber keiner hat den Job gemacht. Meine Unwissenheit in JavaScript ist definitiv ein Problem, aber ich bin normalerweise in der Lage, das zu tun, was ich tun muss, um zu tun. Jede Hilfe wird sehr geschätzt, mit JS Fiddles und Ore Notes, wenn möglich. Vielen Dank im Voraus, Code wie folgt: < /p>

Code: Select all

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>