basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>
        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>