كيفية استخدام H5 لتنفيذ مثال على دوار اللمس

في بداية الواجهة الأمامية ، شارك عملية تنفيذ جثة الشاشة التي تعمل باللمس على الهاتف المحمول.

1. انزلاق دورة الدعم

2. يمكن ضبط العرض بشكل تعسفي ، لا حاجة إلى العرض مع الشاشة

3. يمكن أن تتدحرج الصفحة عموديًا

4. يمكنك ضبط تبديل عناصر مراقبة الاسترداد

5. Pure JS ، لا تستخدم أي مكتبة طرف ثالث

1. افترض أن عرض العنصر الفرعي. هيتيم هو 375 بكسل ، باستخدام المواقع المطلقة لوضع جميع العناصر الفرعية في العنصر الأصل

2. اضبط عرض العنصر الأصل .Carousel على 375 بكسل ، وهو نفس العرض.

3. أضف أحداث اللمس إلى العنصر الأصل. كاروسيل: TouchStart ، TouchMove ، Touchend

4. عند الضغط على إصبعك ، احفظ الموضع الأولي (ClientX)

5. عند انزلاق أصابعك ، احكم على اتجاه الانزلاق من خلال المسافة المنزلق:

① حرك الإصبع إلى اليسار ، وحرك العناصر على الجانب الأيمن من العنصر الحالي والعنصر الحالي في نفس الوقت

② انقلب أصابعك على اليمين ، وحرك العناصر على الجانب الأيسر من العناصر الحالية والحالية في نفس الوقت

6. عندما يتم رفع أصابعك ، حدد ما إذا كنت تريد التبديل إلى الصفحة التالية عن طريق الانزلاق

① لا تتجاوز مسافة الحركة 50 ٪ من عرض العنصر الفرعي ، وتراجع الصفحة الحالية إلى الموضع الأولي دون تبديل العنصر الحالي.

② تتجاوز المسافة المتحركة 50 ٪ من عرض العنصر الطفل ، ويتم تحويل العنصر الحالي إلى العنصر التالي.

③ قم بتعيين خاصية التحويل للعنصر الحالي إلى Translate3D (0px ، 0px ، 0px) و

④ قم بتعيين سمة التحويل للعنصر الطفل التالي إلى ترجمة 3d (375 بكسل ، 0px ، 0px)

⑤ قم بتعيين سمة التحويل للعنصر الطفل السابق إلى Translate3D (-375px ، 0px ، 0px) ، وسمة z-index +1

⑥ قم بتعيين خاصية Z-Index لجميع العناصر الفرعية الأخرى على القيمة الافتراضية

7. العنصر الأول من العنصر الأول هو العنصر الأخير ، والعنصر التالي من العنصر الأخير هو العنصر الأول ، الذي يتم تنفيذه بواسطة القائمة المرتبطة الدائرية.

عند التحرك ، قم بتعيين خاصية تحويل العنصر الطفل .Item ، وليس العنصر الأصل.

HTML و CSS

 // html <div class = carousel onTouchStart => <div class = background: #3b76c0> </h3> </viv> </viv> <div class = itemle = backgr ound: #58c03b ؛> <h3> item- 2 </h3> </viv> <div class = item style = background: #c03b25 ؛> <h3> item-3 </h3> </viv> <div class = background: #e0a718 ؛> <h3> item -4 </h3> </viv> <div class = item style = background: #c03eac ؛> <h3> item-5 </h3> </viv> </viv>

 //css.carous {ارتفاع:

JS

اضبط الحالة الأولية

أدرك أولاً قائمة مرتبطة بالمرتين للحفاظ على العناصر في مكون التناوب.

 دالة (البيانات) {this.data = data.prev = null ؛ الرأس = null ؛ آخر = this.head ؛ {this.head.prev = node ؛ Node .index = _nodes.length ؛

مع القائمة المرتبطة ، قم بإنشاء مثال مرتبط ، وأضف العنصر الفرعي إلى القائمة المرتبطة ، وقم بتعيين بعض الحالات الأولية

 var _container = document.quareSelector (. i ++) {list.append (node ​​node (_Items [i]) ؛} var _prev = null ؛ Zar _Active = _normalzindex + 1 ؛ عناصر لإضافة 1

عندما تضغط على إصبعك ، احفظ الموضع الأولي

 _container.addeventListener (TouchStart ، الوظيفة (e) {// e.preventDefault () ؛ // سوف يمنع شرح السطر من الرمز الصفحة من التداول رأسياً في العنصر. ثم ، ثم clientx ؛ // حفظ موضع موضع FARCH TOUCH.CLIENTY = FALSE ؛

حرك أصابعك على الشاشة ، وحرك أصابعك على الصفحة

 _container.addeventListener (touchmove ، الدالة (e) {// الإصبع الانزلاق في الاتجاه x var deltay = touch.clienty -starty ؛ أن تكون اليسار واليمين. العناصر اليمنى واليسرى في نفس الوقت MoveItems (ترجمة) ؛

عندما يغادر إصبعك الشاشة ، سيبقى الحساب في النهاية على أي صفحة

 _container.addeventListener (touchend ، الوظيفة (e) {// e.preventdefault () ؛ // سيمنع إلغاء رمز هذا السطر من التمرير العمودي للصفحة في العنصر // حساب الإصبع في وقت البقاء على الشاشة var Deltat = تاريخ جديد (). هل المسافة ، هي المسافة بين المسافة المنزلق. من 50 ٪ من الشاشة ، ارجع إلى الصفحة السابقة إذا (Math.ABS (ترجمة)/_itemwidth <0.5) {isRollback = true ؛ الصفحة التالية ترجمة = تترجم <0؟

من أجل تسهيل الاستخدام ، قمت بتغليف عملية التنفيذ بأكملها في مكتبة وأضفت طريقة DREED () ، NEXT () ، وهي بسيطة للغاية:

 <script src = lib/carousel.js> </script> createCarousel (carousel ، it ، bindtouchevent () .SetItemChangedler (onpagechanged) ؛ // ما إذا كانت إعدادات المعلمة الثالثة تحتاج إلى لعبها بواسطة Cycle ، يتم تشغيل True بواسطة Cycle

ما سبق هو كل محتويات هذا المقال.