So verwenden Sie H5, um ein Beispiel für einen Touch -Screen -Rotor zu implementieren

Teilen Sie zu Beginn des Frontends den Implementierungsprozess des Touchscreen -Kadavers auf dem Mobiltelefon.

1. Support -Zyklusrutschen

2. Die Breite kann willkürlich festgelegt werden, keine Breite mit dem Bildschirm

3. Seite kann vertikal rollen

4.. Sie können das Umschalten der Wiederherstellungsüberwachungselemente einstellen

5. Pure JS, verwenden Sie keine Bibliothek Dritter

1. Angenommen, die Breite des Sub -Elements .Item beträgt 375px, wobei die absolute Positionierung alle Sub -Elemente im übergeordneten Element einfügt

2. Setzen Sie die Breite des übergeordneten Elements .Carousel auf 375px, was dem Sub -Element .Item Breite entspricht

3. Fügen Sie dem übergeordneten Element Berührereignisse hinzu .Carousel: Touchstart, Touchmove, Touchend

4. Wenn Sie auf Ihren Finger drücken, speichern Sie die Anfangsposition (Clientx)

5. Beurteilen Sie beim Gleiten mit den Fingern die Richtung des Gleitens durch Gleitabstand:

① Schieben Sie den Finger nach links und bewegen Sie die Elemente auf der rechten Seite des aktuellen Elements und das aktuelle Element gleichzeitig

② Wischen Sie mit den Fingern nach rechts und bewegen Sie die Elemente auf der linken Seite des aktuellen und aktuellen Elements gleichzeitig

6. Wenn Ihre Finger angehoben werden, stellen Sie fest, ob Sie auf die nächste Seite wechseln sollen, indem Sie Abstand rutschen

① Die Bewegungsentfernung überschreitet 50%der Breite der Sub -Element nicht und rollt die aktuelle Seite auf die Anfangsposition zurück, ohne das aktuelle Element zu wechseln.

② Die Bewegungsentfernung übersteigt 50%der Breite des untergeordneten Elements, und das aktuelle Element wird auf das nächste Element umgestellt.

③ Stellen Sie die Transformationseigenschaft des aktuellen Elements auf Translate3D (0px, 0px, 0px) und ein

④ Setzen Sie das Transformationsattribut des nächsten untergeordneten Elements auf Translate3D (375px, 0px, 0px)

⑤ Legen Sie das Transformationsattribut des vorherigen untergeordneten Elements auf Translate3D (-375px, 0px, 0px) und das Z-Index-Attribut +1 ein

⑥ Stellen Sie die Z-Index-Eigenschaft aller anderen Unterelemente auf den Standardwert ein

7. Das erste Element des ersten untergeordneten Elements ist das letzte Element, und das nächste Element des letzten Elements ist das erste Element, das von der kreisförmigen verknüpften Liste implementiert wird.

Stellen Sie beim Umzug die Transformationseigenschaft des untergeordneten Elements .Item, nicht das übergeordnete Element .Carousel

HTML & CSS

 // html <div class = carousel onTouchstart => <div class = Hintergrund: #3b76c0> </h3> </div> </div> <div class = itemle = backgrall ounde: #58c03b;> <h3> item- item- item- item- item- item- 2 </h3> </div> <div class = item style = Hintergrund: #C03B25;> <H3> Item-3 </H3> </div> <div class = Hintergrund: #e0a718;> <H3> Element -4 </h3> </div> <div class = item style = Hintergrund: #c03eac;> <H3> Artikel-5 </h3> </div> </div>

 //cs.carousel {Höhe: 50%;

JS

Setzen Sie den Ausgangszustand

Erkenne zunächst eine auf zwei Wege verknüpfte Liste, um die Elemente in der Rotationskomponente zu verwalten.

 Funktionsknode (Daten) {this.data = data; Head = null; last = this.head;} ​​else {this.head.prev = node; Node .Index = _nodes.length;

Erstellen Sie mit der verknüpften Liste ein verknüpftes Beispiel, fügen Sie die Sub -Element in die verknüpfte Liste hinzu und legen Sie einige Anfangszustände fest

 var _container = document.querySelector (. + Containerklasse); i ++) {list.append (neuer Knoten (_items [i]);} var _prev = null; ZAR _ActiveZindex = _normalzindex + 1; Elemente zum Hinzufügen von 1

Wenn Sie auf Ihren Finger drücken, speichern Sie die Anfangsposition

 _Container.adDeVentListener (TouchStart, Funktion (e) {// e.preventDefault (); // Die Annotation dieser Codezeile verhindert, dass die Seite vertikal im Element rollt. Dann, dann Clientx; // Speichern Sie die Position von von der Finger strict = touch.clienty;

Schieben Sie Ihre Finger auf den Bildschirm und bewegen Sie Ihre Finger auf der Seite

 _Container.adDeVentListener (TouchMove, Funktion (e) {// e.preventDefault (); // Die Annotation dieses Zeilencodes verhindert, dass die Seite im Element vertikal rollt. Der Finger in die x -Richtung var deltay = touch.clienty -Starty; links und rechts sein. seine linken und rechten Elemente gleichzeitig MoveItems (übersetzen);

Wenn Ihr Finger den Bildschirm verlässt, bleibt die Berechnung irgendwann auf welcher Seite

 _Container.adDeVentListener (Touchend, Funktion (e) {// e.preventDefault (); // Die Stornierung des Codes dieser Zeile verhindern die vertikale Seite der Seite vertikal im Element // Berechnen Sie den Finger den Zeitpunkt, um auf dem Bildschirmvar zu bleiben Deltat = neues Datum (). ist die Entfernung, wie viel ist der Abstand zwischen der Schieberentfernung. als 50%des Bildschirms kehren Sie zur vorherigen Seite zurück, wenn (math.abs (übersetzt)/_itemwidth <0,5) {isRollback = true;} else {// Wenn der Gleitabstand 50%größer ist als der Bildschirm, schieben Sie sich nach dem Nächste Seite übersetzt = übersetzen <0?

Um die Verwendung zu erleichtern, habe ich den gesamten Implementierungsprozess in eine Bibliothek eingekapselt und die Methode PREV (), Next () hinzugefügt, die sehr einfach ist:

 <script src = lib/carousel.js> </script> createCarousel (carousel, it, true) .bindtouchEvent () .setItemchangedHandler (onPaGeChangeded); // Ob die dritten Parametereinstellungen vom Zyklus gespielt werden müssen, wird True durch den Zyklus gespielt

Das oben genannte ist der Inhalt dieses Artikels.