Natives Javascript+CSS, um den Karusselleffekt zu erzielen

<ul id="Banner" ></ul>

ul{
    Listenstil: keiner;
    Position: absolut;
    Polsterung: 0;
    links: 0;
    rechts: 0;
    unten: 0;
    oben: 0;
    Rand: automatisch;
    Breite: 800px;
    Höhe: 200px;
}

//Karussell generieren Exportfunktion generateBanner(){
  lass sz = neues Array();
  let cur_ul = document.getElementById('banner');
  const empfiehlt = dies.empfiehlt;

  let timer = setInterval(getNextLi, 3000);

  //Generiere das Karussellbild li
  für (lass i = 0; i < empfiehlt.Länge; i++) {
    //Tags generieren let cur_li = document.createElement("li");
    let cur_img = document.createElement("img");
    //Attribute hinzufügen cur_img.src = recommends[i].pic;
    //Stil hinzufügen cur_li.style.position = 'absolute';
    cur_li.style.left = "0px";
    cur_li.style.transitionDuration = "0,4 s";
    cur_li.style.cursor="Zeiger";

    //ul Gesamtbreite 800, zeigt ein komplettes 400px und zwei unvollständige 200px
    aktuelles_bild.stil.breite = "125px";
    aktuelles Bild.Stil.Höhe = "100px";

    //Unterelement anhängen cur_li.appendChild(cur_img);
    cur_ul.appendChild(cur_li);

    //Für eine einfachere Bedienung alles in ein Array einfügen sz.push(cur_li);
  }

  //Zwei Symbole generieren generateAngleIcons();

  //Verwende die letzten drei Bilder zur Anzeige let len ​​= sz.length – 1;
  //Der Dritte vom letzten showThreeLi();

  //Holen Sie sich die nächste Li-Anzeige und setzen Sie die erste an das Ende des Arrays Funktion getNextLi() {
    Konstanten li = sz[0];
    sz = sz.Scheibe(1);
    sz.push(li);

    //Alle li werden wiederhergestellt für (let i = 0; i < sz.length; i++) {
      //Alle li werden auf ihre Originalgröße zurückgesetzt sz[i].style.transform = "scale(1)";
      sz[i].style.left = "0px";
      //li deckt von klein bis groß ab sz[i].style.zIndex = i;

      //Alles ausblenden sz[i].style.display = "none";
    }
    //Zeige die letzten drei Bilder showThreeLi();

  }

  //Zeige die letzten drei Bilder function showThreeLi() {
    sz[Länge - 2].style.left = "0px";
    //Das vorletzte Bild sz[len - 1].style.left = "120px";
    sz[Länge - 1].style.zIndex = 100;
    sz[Länge - 1].style.transform = "Skala(1,3)";
    //Der Letzte sz[len].style.left = "230px";

    //Anzeige sz[len - 2].style.display = "block";
    sz[Länge - 1].style.display = "Block";
    sz[len].style.display = "Block";
  }


  Funktion generateAngleIcons(){
    const icons = neues Array();

    für (sei i = 0; i < 2; i++) {
      //Symbol li generieren
      let cur_li = document.createElement("li");
      //Stil hinzufügen cur_li.style.position = 'absolute';
      cur_li.style.top = "0px";
      cur_li.style.bottom = "0px";
      cur_li.style.margin = "auto";
      cur_li.style.paddingTop="100px";
      cur_li.style.paddingBottom="100px";
      cur_li.style.zIndex = 20;
      Symbole.push(cur_li);
    }

    Symbole[0].style.left = "0px";
    Symbole[1].style.right = "0px";
    Symbole[0].innerHTML = '<i class="angle left icon"></i>'
    Symbole[1].innerHTML = '<i class="Winkel rechts Symbol"></i>'
    cur_ul.appendChild(Symbole[1]);
    cur_ul.appendChild(Symbole[0]);
  }
}