Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
jQuery Automatischer Bildwechsel Hintergrundbilder ohne jqu

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?

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>