Informationen zum Erstellen von Karussellbildern in H5

Ich bin neu im Frontend und möchte den Implementierungsprozess des Touchscreen-Karussells auf Mobiltelefonen teilen. Die allgemeinen Funktionen sind wie folgt: Unterstützt die zyklische Gleitbreite, die beliebig eingestellt werden kann , und muss nicht die gleiche Breite wie der Bildschirm haben, und Rückrufe können so eingestellt werden, dass das Umschalten von Elementen ohne Verwendung von Bibliotheksprinzipien von Drittanbietern überwacht wird Das untergeordnete Element .item ist 375 Pixel groß, um alle untergeordneten Elemente innerhalb des übergeordneten Elements zu platzieren. Setzen Sie die Breite des übergeordneten Elements .item auf 375 Pixel das übergeordnete Element .carousel: touchstart, touchmove, touchend. Wenn der Finger gleitet, wird die Gleitrichtung durch die Gleitstrecke bestimmt: wenn der Finger nach links gleitet. Das aktuelle Element und das aktuelle Element werden gleichzeitig bewegt. Wenn der Finger des rechten Elements nach rechts gleitet, werden das aktuelle Element und das Element links vom aktuellen Element gleichzeitig bewegt Wenn das Element links vom aktuellen Element angehoben wird, wird anhand der Schiebestrecke beurteilt, ob zur nächsten Seite gewechselt werden soll. Die Bewegungsstrecke überschreitet nicht 50 % der Breite des untergeordneten Elements und wird zur aktuellen Seite verschoben Zurückrollen zur Ausgangsposition, ohne das aktuelle Element zu wechseln. Wenn die Bewegungsdistanz 50 % der Breite des untergeordneten Elements überschreitet, wechseln Sie vom aktuellen Element zum nächsten Element

1 Ein Beispiel-Tutorial zur Implementierung eines Karussells (Touchscreen-Version) mit H5

Einführung: Ich bin neu im Frontend. Lassen Sie mich den Implementierungsprozess des H5 teilen Die allgemeinen Funktionen des Touchscreen-Karussells sind wie folgt: Unterstützt zyklische Schiebebreite und kann beliebig eingestellt werden. Die Seite kann vertikal gescrollt werden Achten Sie auf den Wechsel von Elementen. Gehen Sie davon aus, dass die Breite des Unterelements .item 375 Pixel beträgt, und verwenden Sie die absolute Positionierung, um das untergeordnete Element innerhalb des übergeordneten Elements zu verschieben Breite des übergeordneten Elements .carousel auf 375px, was der gleichen Breite wie das untergeordnete Element .item entspricht. Fügen Sie ein Touch-Ereignis zum übergeordneten Element .carousel hinzu: touchsta...

2 . Details zur Verwendung von H5 zur Implementierung des Touchscreen-Karussells

Einführung: Dieser Artikel Es stellt hauptsächlich vor, wie man mit H5 eine Touchscreen-Version des Karussells implementiert. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Kommen Sie und schauen Sie sich den Editor an

3 Lernen Sie Schritt für Schritt, wie Sie ein Karussell mit jQyery implementieren

Einleitung: Ich glaube, dass jeder die Wirkung eines Karussells auf großen Websites sehen wird, daher kann ich nicht anders, als selbst eines zu erstellen. Ich habe die Informationen überprüft und nachdem ich das Prinzip des Karussells verstanden hatte, versuchte ich es langsam zu machen. Der Endeffekt war gerade noch ausreichend, aber ich möchte es trotzdem für Freunde in Not zusammenfassen.

【Verwandte Q&A-Empfehlungen】:

javascript - js verwendet setInterval, um die automatische Bildkarussellfunktion zu implementieren. Wird es immer schneller?

xcode – ios Bilderkarussell-Frame-Ausnahme

ios – SDScrollview kann das Karussell bei Verwendung mit Masonry nicht anzeigen?

Javascript – JQ-Karussellproblem

Das obige ist der detaillierte Inhalt vonInformationen zum Erstellen von Karussellbildern in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!