jQuery Automatischer Bildwechsel Hintergrundbilder ohne jquery
Guten Morgen,
ich bin jQuery Anfänger und habe eine Frage zu einem kleinen jQuery Code, der einen Bildaustausch vornehmen soll:
Im Array images werden die 3 Bilder gelistet. Eine Schleife soll alle 5 Sek. die Hintergrundbilder nacheinander durchblenden und dann wieder von vorn anfangen.
Das klappt auch für eine gewisse Zeit, nur kommt irgendwann im CSS background-image: undefined.
Wo liegt hier der Fehler?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
}
div {
background-size: cover;
width: 300px;
height: 300px;
background: url("https://basti1012.bplaced.net/image/11.png");
}
.show {
opacity: 1;
transition: opacity 1300ms;
}
.hide {
opacity: 0;
transition: opacity 1300ms;
}
</style>
</head>
<body>
<div class="teaser show"></div>
</body>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
var i = 0;
var images = [
"https://basti1012.bplaced.net/image/11.png",
"https://basti1012.bplaced.net/image/12.png",
"https://basti1012.bplaced.net/image/13.png"
];
var elem = document.querySelector(".teaser");
setInterval(function() {
if (elem.classList.contains("show")) {
elem.classList.add("hide");
elem.classList.remove("show");
var fadeout = setTimeout(function() {
elem.style.background = "url(" + images[i] + ")";
elem.classList.add("show");
elem.classList.remove("hide");
clearTimeout(fadeout);
}, 300);
}
i++;
if (i > 2) i = 0;
}, 5000);
});
</script>
</html>