H5を使用してタッチスクリーンローターの例を実装する方法

フロントエンドの最初に、携帯電話でタッチスクリーンの死体の実装プロセスを共有します。

1。サポートサイクルスライド

2。幅は任意に設定できます。画面で幅を使用する必要はありません

3.ページは垂直にロールできます

4.回復監視要素の切り替えを設定できます

5。純粋なJS、サードパーティライブラリを使用しないでください

1.サブエレメントの幅が375pxであると仮定します。絶対的な位置を使用して、すべてのサブエレメントを親要素に配置します

2.親要素の幅を.carouselの幅を375pxに設定します。

3.親エレメントにタッチイベントを追加します。Carousel：TouchStart、TouchMove、TouchEnd

4。指を押すと、初期位置（clientx）を保存します

5.指を滑らせるときは、スライド距離でスライドする方向を判断します。

cendy指を左にスライドさせ、現在の要素と現在の要素の右側の要素を同時に動かします

wingを右にスワイプし、電流要素と電流要素の左側の要素を同時に動かします

6.指が持ち上げたら、スライド距離で次のページに切り替えるかどうかを判断します

movement移動距離は、サブエレメントの幅の50％を超えず、現在の要素を切り替えることなく現在のページを初期位置にロールバックします。

reaving移動距離は子要素の幅の50％を超え、現在の要素は次の要素に切り替えられます。

current現在の要素の変換プロパティを3D（0px、0px、0px）に設定し、

cranslate3d（375px、0px、0px）に次の子要素の変換属性を設定します

cransly3D（-375px、0px、0px）を翻訳するように前の子要素の変換属性を設定し、z-index属性+1を設定します

other他のすべてのサブエレメントのz-indexプロパティをデフォルト値に設定します

7.最初の子要素の最初の要素は最後の要素であり、最後の要素の次の要素は最初の要素であり、これは円形のリンクリストによって実装されます。

移動するときは、子要素ではなく、子要素.itemの変換プロパティを設定します。

HTML＆CSS

 // html <div class = carousel ontouchstart => <div class = class = claght：＃3b76c0> </h3> </div> </div> <div class = backgr ound：＃58c03b;> <h3>項目 - 2 </h3> </div> <div class =アイテムスタイル=背景：＃c03b25;> <h3> item-3 </h3> </div> <div class =背景：＃e0a718;> <h3> -4 </h3> </div> <div class =アイテムスタイル=背景：＃c03ec;> <h3>アイテム-5 </h3> </div> </div>

 //CAROUSEL {50％：

JS

初期状態を設定します

最初に、回転コンポーネントの要素を維持するための2つのウェイリンクリストを実現します。

 function node（this.data = null; head = null; last = head;} node .index = _nodes.length; // node.index_nodes.push（node）;}}}を設定してください

リンクされたリストを使用して、リンクされた例を作成し、サブエレメントをリンクリストに追加し、いくつかの初期状態を設定します

var _container = document.queryselector（。 + canterclass）; i ++）{new node（_items [i]）;} var _prev = null; ZAR _ACTIVEZINDEX = _NORMALZINDEX 1; 1を追加する要素

指を押したら、最初の位置を保存します

_container.addeventlistener（touchstart、function（e）{// e.preventdefault（）; //このコード行のアノテーションは、要素でページが垂直に巻かれるのを防ぎます。 Finger Strict.Clienty;

画面で指をスライドさせ、ページで指を動かします

_container.addeventlistener（touchmove、function（e）{// e.preventdefault（）; //この行コードのアノテーションにより、要素内のページが垂直に転がるのが妨げられます。 x方向の指の滑りvar deltay = touch.clienty -starty; // y方向の指の間の距離を計算します//左右にスライディングする場合（Math.Abs​​（deltax）> math.abs（deltay）{翻訳= deltax> _itemwidth：_itemwidth; translate = deltas <-_ itemwidth; //現在の要素を移動し、同時にその左右の要素は、moveItems（translate）;

指が画面を離れると、計算は最終的にどのページにとどまります

_container.addeventlistener（touchend、function（e）{// e.preventdefault（）; //この行のコードのキャンセルは、要素のページの垂直スクロールを妨げます//指の計算時間deltat = new date（）-startt;距離は、スライド距離の間の距離です。すべて（deltat <300）{翻訳<0？画面の50％よりも前のページに戻ります（math.abs（translate）/_itemwidth <0.5）{isrollback = true;} else {//スライド距離が画面より50％大きい場合、スライドして次のページ翻訳= <0？

使用を容易にするために、実装プロセス全体をライブラリにカプセル化し、prev（）、next（）メソッドを追加しました。これは非常に簡単です。

 <スクリプトsrc = lib/carousel.js> </script> createcarousel（carousel、it、true）.bindtouchevent（）。 // 3番目のパラメーター設定をサイクルで再生する必要があるかどうか、trueはサイクルによって再生されます

上記は、この記事のすべての内容です。