Archiv-Modus von Basti1012 Lösungspage

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?

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>

basti1012.bplaced.net

jQuery Automatischer Bildwechsel Hintergrundbilder ohne jquery

Code