Beispiel-Tutorial zum nahtlosen Scrollen eines JS-Karusselldiagramms

In diesem Artikel wird hauptsächlich der nahtlose Bildlaufeffekt des js-Karusselldiagramms ausführlich vorgestellt, der einen gewissen Referenzwert hat.

Wenn Sie wissen möchten, wann das Karusselldiagramm beginnt und endet Herstellung Wenn sie nicht verbunden werden können, ist der Effekt etwas hässlich. Hier ist eine Methode, die ich häufig verwende:

Lassen Sie es mich zunächst in Worten erklären:

Wenn Sie 5 anzeigen möchten Bilder, sie sind 1, 2 und 3. ,4,5 Dann ist die Einführung des Codes so: 1,2,3,4,5,1

Ich werde nicht viel darüber sagen sequentielle Rotation hier, der Fokus ist 5>1 und das Karussell ist 1>5

i stellt den Index des aktuellen Bildes dar

pre stellt die Schaltfläche des vorherigen Bildes dar

next stellt die Schaltfläche des nächsten Bildes dar

ul stellt die Bilderliste dar

(1) 5>1>2... Wenn die Schaltfläche „Weiter“ von 5 auf 1 wechselt, dreht sie sich Normalerweise in der Reihenfolge, und wenn das aktuelle Bild das zweite „1“ ist, sollte das nächste Bild „2“ sein, dann ist der linke Wert von ul bei „next“ 0, i==1; (2) 1>5>4.... Wenn sich die Schaltfläche „Vor“ vom aktuellen Bild „1“ (der ersten 1) zu Bild 5 dreht, i==4, wird der linke Wert von ul zum -5-fachen Die Breite des Bildes, das heißt, die erste 1 wird leise zur letzten 1; es ist etwas verwirrend, sie in der Sprache auszudrücken. Hier ist der Code:

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zum nahtlosen Scrollen eines JS-Karusselldiagramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!