JS implementiert Karussell mit mehreren Tabs

<div id="box">
    <div class="Landschaftsbild">
      <img class="show" src="imgs/s2.jpg" alt="Landschaft">
      <img src="imgs/s3.jpg" alt="Landschaft">
      <img src="imgs/s1.jpg" alt="Landschaft">
      <img src="imgs/s5.jpg" alt="Landschaft">
      <img src="imgs/s4.jpg" alt="Landschaft">
    </div>
    <div Klasse="Autobild">
      <img src="imgs/animal4.jpg" alt="Tier">
      <img src="imgs/animal3.jpg" alt="Tier">
      <img src="imgs/animal2.jpg" alt="Tier">
      <img src="imgs/tier1.jpg" alt="Tier">
    </div>
    <div class="Unterhaltungsbild">
      <img src="imgs/entertainment1.jpg" alt="Unterhaltung">
      <img src="imgs/entertainment2.jpg" alt="Unterhaltung">
      <img src="imgs/entertainment3.jpg" alt="Unterhaltung">
      <img src="imgs/entertainment4.jpg" alt="Unterhaltung">
      <img src="imgs/entertainment5.jpg" alt="Unterhaltung">
    </div>
    <div Klasse="linke Leiste">
      <div class="checked">Landschaft</div>
      <div>Berühmtes Auto</div>
      <div>Unterhaltung</div>
    </div>
    <div Klasse="bottombar">
 
    </div>
</div>

/* Aus Gründen der Layoutfreundlichkeit wird Flex hauptsächlich in Containern verwendet */
#Kasten {
      Position: relativ;
      Breite: 460px;
      Höhe: 300px;
      Rand: 40px automatisch;
      Rand: 1px durchgezogenes RGB (109, 98, 98);
      Benutzerauswahl: keine;
    }
    /* Seitenleistenlayout */
    .linke Leiste {
      Anzeige: Flex;
      Flex-Richtung: Spalte;
      Inhalt ausrichten: Abstand dazwischen;
      Position: absolut;
      oben: -1px;
      links: -80px;
      Breite: 80px;
      Höhe: 100%;
      Textausrichtung: zentriert;
      Schriftgröße: 20px;
      Cursor: Zeiger;
    }
 
    .leftbar div {
      biegen: 1;
      Zeilenhöhe: 100px;
      Hintergrundfarbe: Kadettenblau;
      Buchstabenabstand: 5px;
    }
 
    .leftbar div:nth-child(2) {
      Rahmen oben: 1px durchgezogen #fff;
      Rahmen unten: 1px durchgezogen #fff;
    }
 
    /* Design im Stil des unteren Schalterknopfs*/
    .bottombar {
      Anzeige: Flex;
      Inhalt ausrichten: Abstand dazwischen;
      Position: absolut;
      unten: -1px;
      rechts: -1px;
      Z-Index: 10;
      Breite: 200px;
      Höhe: 30px;
      Cursor: Zeiger;
    }
 
    .bottombar div {
      biegen: 1;
      Zeilenhöhe: 30px;
      Hintergrundfarbe: rgb(232, 233, 235, .5);
      Textausrichtung: zentriert;
      Schriftstärke: 700;
    }
 
    .bottombar div~div {
      Rahmen links: 1px durchgehend grau;
    }
 
    img {
      Position: absolut;
      Anzeige: Block;
      Breite: 460px;
      Höhe: 300px;
    }
 
    .zeigen {
      Z-Index: 5;
    }
 
    .linke Leiste .überprüft,
    .bottombar .geprüft {
      Hintergrundfarbe: rgb(241, 5, 5);
    }

var Box = document.querySelector('#box'), Bild = Box.querySelectorAll('.pic'),
    Idx = 0, Index = 0, Timer = null,
    ltDiv = Box.querySelector('.leftbar'), btDiv = Box.querySelector('.bottombar'),
    Bild = Box.querySelectorAll('img');
 
    Funktion createBtBar(len) {//Den unteren Schalterknopf dynamisch erstellen, var str = '';
      für (var i = 0; i < len; i++) {
        str += `<div>${i + 1}</div>`;
      }
      btDiv.innerHTML = str;
      btDiv.children[0].classList.add('aktiviert');
    }
 
    function initialize() {//Anfänglicher Status der Seite createBtBar(pic[0].children.length);
    }
    initialisieren();
 
    function clearZindex() {//Setze die Positionierungsebene aller Bilder zurück für (var k = 0; k < Img.length; k++) {
        Img[k].classList.remove('anzeigen');
      }
    }
 
    ltDiv.addEventListener('click', (e) => {//Seitenleistenelement wechselnif (e.target.tagName.toLowerCase() === 'div') {
        für (var j = 0; j < ltDiv.children.length; j++) {
          ltDiv.children[j].classList.remove('aktiviert');
        }
 
        klarZindex();
        Idx = 0;
        index = getEleIdx(e.target);
        ltDiv.children[index].classList.add('aktiviert');
        Bild[index].Kinder[0].Klassenliste.add('anzeigen');
        erstelleBtBar(Bild[index].Kinder.Länge);
      }
    });
 
    btDiv.addEventListener('click', (e) => {//Delegate hört auf den unteren Schalterknopf if (e.target.tagName.toLowerCase() === 'div') {
        Funktion changePic(Rückruf) {
          btDiv.children[Idx].classList.remove('aktiviert');
 
          klarZindex();
          Rückruf && Rückruf();
          btDiv.children[Idx].classList.add('aktiviert');
          Bild[index].Kinder[Idx].Klassenliste.add('anzeigen');
        }
        Bildändern(Funktion () {
          Idx = getEleIdx(e.target);
        });
      }
    });
 
    Funktion getEleIdx(Element) {//DOM-Elementindex abrufen var Elemente = Element.parentNode.children;
      für (var i = 0, len = Elemente.Länge; i < len; i++) {
        wenn (Element === Elemente[i]) {
          gebe ich zurück;
        }
      }
    }
 
    Funktion loopShow() {//Schleife automatische Anzeige clearInterval(timer);
      Timer = Intervall festlegen(Funktion () {
        Bild[index].Kinder[Idx].Klassenliste.entfernen('anzeigen');
        btDiv.children[Idx].classList.remove('aktiviert');
        Idx += 1;
        wenn (Idx < 0 || Idx > pic[index].children.length - 1) {
          Idx = 0;
        }
        Bild[index].Kinder[Idx].Klassenliste.add('anzeigen');
        btDiv.children[Idx].classList.add('aktiviert');
      }, 1000);
    }
 
    loopShow();
 
    Box.addEventListener('mouseover', Funktion () {
      clearInterval(timer); //Bewegen Sie die Maus in den Anzeigebereich, um das Karussell anzuhalten });
    Box.addEventListener('mouseout', Funktion () {
      loopShow(); //Um eine automatische Drehung zu erreichen, bewegen Sie die Maus aus dem Anzeigebereich });