jQuery Automatischer Bildwechsel Hintergrundbilder 1
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>
div {
background: url("https://basti1012.bplaced.net/image/11.png");
background-size: cover;
width: 300px;
height: 400px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
</head>
<body>
<div class="teaser"></div>
<script>
jQuery(document).ready(function() {
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 image = $(".teaser");
setInterval(function() {
image.fadeOut(100, function() {
image.css("background-image", "url(" + images[i] + ")");
image.fadeIn(100);
});
if (i == 2) {
i = 0;
} else {
i++;
}
}, 5000);
});
</script>
</body>
</html>