Tipps zur Implementierung von Listenschleifen-Scrollen basierend auf jQuery (super einfach)

//Einzufüllende Datenvar data = {
     infoItem: [
         „<strong>Zeile 1:</strong>Anzhian …
         „<strong>Zeile 2:</strong>Sunshine Rainbow Little White HorseSunshine Rainbow Little White HorseSunshine Rainbow Little White Horse“,
         „<strong>Zeile 3:</strong> Die Weite von Himmel und Erde. Die Weite von Himmel und Erde. Die Weite von Himmel und Erde. Die Weite von Himmel und Erde.“
     ]
 }
 // Daten dynamisch in die Seite einfügen var infoList = []
 für (lass i = 0; i < data.infoItem.length; i++){
     let infoStr = `<div class="item">${data.infoItem[i]}</div>`
     infoList.push(infoStr);
 }
 $(".info-wrapper").html(infoList.join(""))

 //Setzen Sie einen Timer, der alle 2 Sekunden ausgeführt wird (einmal ändern)
 var Timer = null;
 Timer = Intervall festlegen(Funktion () {
     // Verschiebe die erste Zeile mit Elementen in die letzte Zeile und verschiebe die anderen nach oben, um die freien Stellen zu füllen. var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp);
     $(".item:first").entfernen();
     infoList.push(infoItemTmp)

 }, 2000)

<div Klasse="Container">
        <div Klasse="Wrapper">
            <div Klasse="info">
                <div Klasse="info-wrapper"></div>
            </div>
        </div>
    </div>

.container {
    Breite: 900px;
    Höhe: 400px;
    Rand: 2px durchgezogen #eee;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

.wrapper {
    Breite: 500px;
    Höhe: 300px;
    Rand: 1px durchgezogen #ccc;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Inhalt ausrichten: zentriert;
}

.die Info {
    Breite: 100 %;
    Höhe: 100%;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Abstand dazwischen;
    Inhalt ausrichten: zentriert;
}

.info-Wrapper {
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: versteckt;
}

.Artikel {
    Rand: 2px durchgezogen #ccc;
    Rahmen links: 4px durchgehend orange;
    Höhe: 80px;
    Breite: 100 %;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Box-Größe: Rahmenbox;
    Rahmenradius: 8px;
    Rand oben: 20px;
}

.item:erstes-Kind {
    Animation: 2 s lineare Bewegung;
}
@keyframes verschieben {
    100 % {
        Rand oben: -80px;
    }
}

//Stellen Sie den Timer so ein, dass er alle 2 Sekunden ausgeführt wird (einmal ändern) – dieselbe Zeit, die während der Animation eingestellt wird. var timer = null;
Timer = Intervall festlegen(Funktion () {
    wenn ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {
        // Verschiebe die erste Zeile mit Elementen in die letzte Zeile und verschiebe die anderen nach oben, um die freien Stellen zu füllen. var infoItemTmp = infoList.shift();
        $(".info-wrapper").append(infoItemTmp);
        $(".item:first").entfernen();
        infoList.push(infoItemTmp)
    }
}, 2000)