jQuery ermöglicht nahtloses Scrollen von Tabellen

*{
            Rand: 0;
            Polsterung: 0;
        }
        ul,li{
            Listenstil: keiner;
        }
        .tableBox{
            Breite: 500px;
            Höhe: 520px;
            Hintergrund: #e8e8e8;
            Rand: 0 automatisch;
            Überlauf: versteckt;
        }
        .Folientitel{
            Höhe: 2,5rem;
            Zeilenhöhe: 2,5rem;
            Anzeige: Flex;
            Hintergrund: #223e80;
            Farbe: #fff;
            Textausrichtung: zentriert;
        }
        .Folientitel span{
            biegen: 1;
        }
        .Folienliste li{
            Zeilenhöhe: 1,875rem;
            Höhe: 1,875rem;
            Anzeige: Flex;
        }
        .slide-list li span{
            biegen: 1;
            Textausrichtung: zentriert;
        }
        .Folienliste li.odd{
            Hintergrund: rgba (0,0,0,.3)
        }

<div Klasse="tableBox">
    <div Klasse="Folientitel">
        <span>Titel1</span>
        <span>Titel2</span>
        <span>Titel3</span>
    </div>
    <div Klasse="Foliencontainer">
        <ul Klasse="Folienliste js-Folienliste">
            <li class="odd"><span>Artikel1</span><span>Artikel1</span><span>Artikel1</span></li>
            <li class="even"><span>Artikel2</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel3</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel4</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel5</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel6</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel7</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel8</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel9</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel10</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel11</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel12</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel13</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel14</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel15</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel16</span><span>Artikel2</span><span>Artikel2</span></li>
        </ul>
    </div>
</div>

$(Funktion(){
    // Löschen Sie den Timer, wenn die Maus über $(".slide-list").hover(function(){ bewegt wird.
        : Löschintervall(ScrollTimer);
    },Funktion(){
        scrollTimer = Intervall festlegen(Funktion (){
            autoScroll(".Folienliste")
        },2000);
    });
 
 
    Funktion autoScroll(Objekt){
            var tableUl = $(obj);
            var erste = tableUl.find('li:erste');
            var Höhe = erste.Höhe();
            zuerst.animieren({
                Höhe: 0
            },500,Funktion(){
                first.css('Höhe',Höhe).appendTo(tableUl);
            })
    }
   var scrollTimer = setzeIntervall(Funktion(){
        autoScroll(".Folienliste")
    },2000)
})

$(Funktion(){
    
    
    Funktion autoScroll(Objekt){
            var tableUl = $(obj);
            var erste = tableUl.find('li:erste');
            var Höhe = erste.Höhe();
            zuerst.animieren({
                Höhe: 0
            },500,Funktion(){
                first.css('Höhe',Höhe).appendTo(tableUl);
            })
    }
   setzeIntervall(Funktion(){
        autoScroll(".Folienliste")
    },2000)
})

wenn(timer != null) {
    Intervall löschen(Timer);
}

$(Funktion(){
 
 
var allUrl = "http://localhost:8899/tv/alldata";
 
renderPage();
 
 var Timer = Intervall festlegen(Funktion(){
    renderPage ()
},5000);
wenn(timer != null) {
    Intervall löschen(Timer);
}
 
 
Funktion renderPage () {
    konsole.log(111);
    $.ajax({
        url:alleUrl,
        asynchron:wahr,
        Erfolg:Funktion(Ergebnis){
          console.log(Ergebnis);
          wenn(Ergebnis.Erfolg === wahr){
              Konsole.log('Daten',Ergebnis.Daten);
              var niujuOneData = result.data.counts[0].tvmTvToolUsageCount;
              var niujuTwoData = result.data.counts[1].tvmTvToolUsageCount;
              var niujuThreeData = result.data.counts[2].tvmTvToolUsageCount;
              var niujuFourData = result.data.counts[3].tvmTvToolUsageCount;
              var recordTableData = Ergebnis.Daten.History;
              var useTableOneData = result.data.usage.needCheckTools;
              var useTableTwoData = result.data.usage.expireCheckTools;
              var useTableThreeData = result.data.usage.usingTools;
              console.log('Daten 1',niujuOneData)
 
              renderNiuju('#banshouOne','#otherOne','#totalOne',niujuOneData);
              renderNiuju('#banshouZwei','#andereZwei','#totalZwei',niujuZweiDaten);
              renderNiuju('#banshouThree','#otherThree','#totalThree',niujuThreeData);
              renderNiuju('#banshouVier','#andereVier','#totalVier',niujuVierDaten);
              renderRecordTable('#tvTableFour',recordTableData);
              renderUseStateTable ('#tvTableOne', useTableOneData);
              renderUseStateTable ('#tvTableTwo', useTableTwoData);
              renderUseStateTable('#tvTableThree',useTableThreeData);
          }
        }
    });
};
/**
 * Drehmomentdaten-Rendering-Funktion */
Funktion renderNiuju (obj1,obj2,obj3,tableData) {
    var niujuWrenchString = '<div class="tq-niuju-title-item blue">'+tableData.torqueToolTotalCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.torqueToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.torqueToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.torqueToolNeedCheckCount+'</div>'
    var orderToolString = '<div class="tq-niuju-title-item blue">'+tableData.otherToolTotalCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.otherToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.otherToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.otherToolNeedCheckCount+'</div>'
    var toolTotalString = '<div class="tq-niuju-title-item blue">'+tableData.totalToolCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.totalToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.totalToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.totalToolNeedCheckCount+'</div>'
 
    $(obj1).html(niujuWrenchString)
    $(obj2).html(orderToolString)
    $(obj3).html(toolTotalString)
 
}
 
/**
 * Funktion zur Darstellung der Operationsdatensatztabelle */
Funktion renderRecordTable (Objekt, Tabellendaten) {
    var Tabellenzeichenfolge = '';
    $.each(Tabellendaten,Funktion(Index,Wert){
        wenn(index % 2 == 0){
            Tabellenzeichenfolge += ' <li Klasse="ungerade">'+
                '<div class="tq-des">'+Wert.Inhalt+'</div>'+
                '<div class="tq-time">'+Wert.Erstellungszeit+'</div>'+
                '</li>'
        }anders{
            Tabellenzeichenfolge += ' <li Klasse="gerade">'+
                '<div class="tq-des">'+Wert.Inhalt+'</div>'+
                '<div class="tq-time">'+Wert.Erstellungszeit+'</div>'+
                '</li>'
        }
    });
    $(obj).leer();
    $(obj).html(Tabellenzeichenfolge);
}
 
Funktion renderUseStateTable (Objekt, Tabellendaten) {
    var Tabellenzeichenfolge = '';
 
    $.each(Tabellendaten,Funktion(Index,Wert){
        wenn(index % 2 == 0){
            Tabellenzeichenfolge += '<li class="odd">'+
                '<span>'+Wert.GesamtPositionskodierung+'</span><span>'+Wert.ToolCode+'</span>'+
                '</li>'
        }anders{
            Tabellenzeichenfolge += '<li class="even">'+
                '<span>'+Wert.GesamtPositionskodierung+'</span><span>'+Wert.ToolCode+'</span>'+
                '</li>'
        }
    })
 
    $(obj).html(Tabellenzeichenfolge);
 
}
 
setzeIntervall(Funktion(){
    autoScroll("#tvTableOne")
    autoScroll("#tvTableTwo")
    autoScroll("#tvTableThree")
    autoScroll("#tvTableFour")
},2000)
 
Funktion autoScroll(Objekt){
    var tableUl = $(obj);
    var erste = tableUl.find('li:erste');
    var Höhe = erste.Höhe();
    zuerst.animieren({
        Höhe: 0
    },500,Funktion(){
        first.css('Höhe',Höhe).appendTo(tableUl);
    })
}
 
 
});