Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispiel-Tutorial zum nahtlosen Scrollen eines JS-Karusselldiagramms

零下一度
Freigeben: 2017-06-19 09:04:08
Original
2193 Leute haben es durchsucht

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage