So implementieren Sie die jQuery-Karussellfunktion

<!-- Der gesamte Karussellbereich-->
  <div Klasse="Container">
   <!-- Karussell-->
   <ul Klasse="Artikel" Stil="links:-200px">
   <!-- Eigentlich werden nur 5 Bilder gedreht, das erste wird tatsächlich auf das letzte gelegt und das letzte wird tatsächlich auf das erste gelegt, ein Trick -->
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
   </ul>
   <!-- Linke und rechte Seitenschaltflächen -->
   <span class="left">&lt;</span>
   <span class="right">&gt;</span>
   <!-- Punkt -->
   <ul Klasse="Punkte">
    <li Klasse="aktuell"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>

<Stil>
   /* Karussellbereich*/
   .container {
    Breite: 200px;
    Höhe: 100px;
    Rand: 100px automatisch;
    Überlauf: versteckt;
    Position: relativ;
   }

   ul {
    Position: absolut;
    Listenstiltyp: keiner;
    Breite: 1400px;
    Polsterung: 0;
    Rand: 0;
   }

   /* Karussellbilder*/
   .items li {
    Breite: 200px;
    Höhe: 100px;
    Rand: 0;
    Polsterung: 0;
    schweben: links;
    Hintergrundfarbe: rosa;
    Textausrichtung: zentriert;
   }
   /* Linker und rechter Seitenbereich */
   Spanne {
    Anzeige: Block;
    Breite: 20px;
    Höhe: 30px;
    Hintergrundfarbe: rgba(70, 130, 180, 0,3);
    Position: absolut;
    oben: 50 %;
    transformieren: verschiebeY(-50%);
    Zeilenhöhe: 30px;
   }

   Spanne:Hover {
    Cursor: Zeiger;
   }

   .links {
    links: 0;
   }

   .Rechts {
    rechts: 0;
   }
   /* Punkt */
   .Punkte {
    Breite: 45px;
    Rand: 0;
    Polsterung: 0;
    unten: 3px;
    links: 50%;
    transformieren: übersetzenX(-50%);
   }

   .Punkte li {
    schweben: links;
    Breite: 7px;
    Höhe: 7px;
    Randradius: 50 %;
    Rand: 1px;
    Hintergrundfarbe: rgba(0, 0, 0, 0,5);
   }

   .Punkte li:hover {
    Hintergrundfarbe: rgba(255, 250, 205, 1);
   }

   .Punkte .aktuell {
    Hintergrundfarbe: rgba(255, 250, 205, 1);
   }
</Stil> 

<Skripttyp="text/javascript">
   // 1. Klicken Sie auf die Schaltfläche, um zwischen den Seiten links und rechts zu wechseln------Karussell + Animation, Maus tritt ein, Wiedergabe pausiert, Maus bewegt sich heraus, Wiedergabe wird fortgesetzt// 2. Die Seite wechselt automatisch alle 3 Sekunden// 3. Die Punkte wechseln gemeinsam den Stil// Links wechseln let $left = $('.left')
   // Rechts wechseln let $right = $('.right')
   //Bild li
   lass $list = $('.items')
   lass $items = $list.children()
   // Großer Container let $container = $('.container')
   // Punkte let $points = $('.points').children()
   Konstante Länge = $Punkte.Länge

   //Gesamtversatz eingestellt = li.width
   Konstante Artikelbreite = 200
   //Stelle die Zeit für jede Animation in ms ein
   konstante Zeit = 50
   // Anzahl der Züge const n = 20
   // Maximaler Offset der Liste – (Länge+1)*li.Breite
   const long = -(Länge + 1) * Artikelbreite
   // Gibt an, ob die Seite umgeblättert wird. Standardmäßig wird die Seite nicht umgeblättert.------>Löst das Problem der Positionsabweichung beim Klicken auf die Seite beim Umblättern. let moveFlag = false
   //Timer-Bewegungszeit const TIME = 3000
   // Nach links wechseln $left.click(function() {
    ändereArtikel(true)
   })
   // Nach rechts wechseln $right.click(function() {
    ändereArtikel(false)
   })
   // Automatische Umschaltung let timer = setInterval(function() {
    ändereArtikel(false)
   }, ZEIT)
   // Wenn die Maus hineingeht, wird die Wiedergabe angehalten, und wenn die Maus hinausgeht, wird die Wiedergabe fortgesetzt$container.hover(function() {
    Intervall löschen(Timer)
   }, Funktion() {
    Timer = Intervall setzen(Funktion() {
     ändereArtikel(false)
    }, ZEIT)
   })
   //Klicken Sie auf den Punkt, um die Seite umzublättern$points.click(function() {
    //Den Index des aktuell angeklickten Elements abrufen
    lass index = $(diesen).index()
    // Zur entsprechenden Index-Map springen changeItem(index)
    // Stile anderer Geschwister von dots$points.eq(index).addClass('current').siblings().removeClass('current') aufheben
   })
   // Links- und Rechts-Umschaltfunktion Kapselungsfunktion changeItem(flag) {
    // Wenn die Seite gerade umgeblättert wird, direkt zurückkehren if (moveFlag) {
     zurückkehren
    }
    // Wenn die Seite nicht umgeblättert wird, führen Sie den Code aus und ändern Sie moveFlag auf true, um anzuzeigen, dass die Seite umgeblättert wird. moveFlag = true
    // Offset ist der Offset let offset = 0;
    // 
    Lassen Sie currentLeft = parseInt($list.position().left)
    // Wenn der übergebene Typ Boolean ist, bedeutet dies ein reibungsloses Umblättern nach links und rechts. // Wenn der übergebene Typ numerisch ist, bedeutet dies, dass Sie auf den Punkt klicken, um die Seite umzublättern. if (typeof flag == 'boolean') {
     // Bestimmen Sie, ob nach links oder rechts gespiegelt werden soll, und legen Sie den entsprechenden Verschiebungsoffset = Flag fest? itemWidth: -itemWidth
    } anders {
     // Klicken Sie auf den Punkt, um die Seite umzublättern // -(flag + 1)*itemWidth ist die Zielverschiebung, currentLeft ist die aktuelle Distanz offset = -(flag + 1) * itemWidth - currentLeft
    }
    // Wird verwendet, um die Anzahl der Ausführungen zu akkumulieren let i = 0
    /*
    Umschalten des Animationseffekts: Berechnen Sie die Gesamtentfernung anhand der Anzahl der Male = Gesamtversatz = Versatz
    Stellen Sie die Zeit jedes Mal ein
    */
    // Die Distanz jeder Bewegung itemOffset
    let itemOffset = offset / n
    // Holen Sie sich die aktuelle linke
    // Timer-Funktion const timer = setInterval(function() {
     // Füge bei jeder Ausführung eins hinzu, bis i===n, was bedeutet, dass der Timer stoppt, wenn die Anzahl der Ausführungen ausreichend ist i++
     currentLeft += itemOffset
     // Linken Wert festlegen // Sie müssen zuerst den Wert festlegen und dann $list.css('left', currentLeft) beurteilen.
     wenn (i === n) {
      // Die Verschiebung ist ausreichend, löschen Sie den Timer clearInterval(timer)
      // Seitenumblättern beendet moveFlag = false
      // Der Punkt ändert sich entsprechend$points.eq(Math.abs(currentLeft / itemWidth) - 1).addClass('current').siblings().removeClass('current')
      // Wenn das letzte Bild gefunden wurde, wechsele zum zweiten Bild. Das Bild ist ein Karussell, wenn (currentLeft == long) {
       $list.css('links', -itemWidth)
       // Setze die Punkte auf das tatsächliche erste Bild $points.eq(0).addClass('current').siblings().removeClass('current')
       // Wenn das unterste Bild des letzten Bildes erreicht wurde, kehre zum eigentlichen ersten Bild zurück} else if (currentLeft == 0) {
       $list.css('links', -length * Artikelbreite)
       // Setze die Punkte auf das tatsächlich letzte Bild $points.eq(length - 1).addClass('current').siblings().removeClass('current')
      }
     }
    }, Zeit)
   }
</Skript>