วิธีใช้ H5 เพื่อใช้ตัวอย่างของใบพัดสัมผัสหน้าจอ

ที่จุดเริ่มต้นของส่วนหน้าแบ่งปันกระบวนการใช้งานของซากศพหน้าจอสัมผัสบนโทรศัพท์มือถือ

1. การสนับสนุนรอบการเลื่อน

2. ความกว้างสามารถตั้งค่าได้โดยพลการไม่จำเป็นต้องกว้างกับหน้าจอ

3. หน้าสามารถม้วนในแนวตั้ง

4. คุณสามารถตั้งค่าการสลับองค์ประกอบการตรวจสอบการกู้คืน

5. JS บริสุทธิ์อย่าใช้ห้องสมุดบุคคลที่สามใด ๆ

1. สมมติว่าความกว้างของส่วนย่อย.

2. ตั้งค่าความกว้างขององค์ประกอบหลัก. carousel เป็น 375px ซึ่งเหมือนกับความกว้างย่อย.

3. เพิ่มเหตุการณ์สัมผัสลงในองค์ประกอบหลัก. carousel: touchstart, touchmove, touchend

4. เมื่อคุณกดนิ้วให้บันทึกตำแหน่งเริ่มต้น (clientx)

5. เมื่อเลื่อนนิ้วของคุณตัดสินทิศทางของการเลื่อนโดยระยะเลื่อน:

①เลื่อนนิ้วไปทางซ้ายแล้วเลื่อนองค์ประกอบทางด้านขวาขององค์ประกอบปัจจุบันและองค์ประกอบปัจจุบันในเวลาเดียวกัน

②ปัดนิ้วของคุณไปทางขวาและเลื่อนองค์ประกอบทางด้านซ้ายขององค์ประกอบปัจจุบันและปัจจุบันในเวลาเดียวกัน

6. เมื่อนิ้วของคุณถูกยกขึ้นให้พิจารณาว่าจะเปลี่ยนไปใช้หน้าถัดไปโดยการเลื่อนระยะทาง

①ระยะการเคลื่อนไหวไม่เกิน 50%ของความกว้างขององค์ประกอบย่อยและย้อนกลับหน้าปัจจุบันไปยังตำแหน่งเริ่มต้นโดยไม่ต้องสลับองค์ประกอบปัจจุบัน

②ระยะการเคลื่อนที่เกินกว่า 50%ของความกว้างขององค์ประกอบเด็กและองค์ประกอบปัจจุบันจะเปลี่ยนเป็นองค์ประกอบถัดไป

③ตั้งค่าคุณสมบัติการแปลงขององค์ประกอบปัจจุบันเป็น translate3d (0px, 0px, 0px) และ

④ตั้งค่าแอตทริบิวต์การแปลงขององค์ประกอบลูกถัดไปเป็น translate3d (375px, 0px, 0px)

⑤ตั้งค่าแอตทริบิวต์การแปลงขององค์ประกอบลูกก่อนหน้าเป็น translate3d (-375px, 0px, 0px) และแอตทริบิวต์ z-index +1

⑥ตั้งค่าคุณสมบัติ z-index ขององค์ประกอบย่อยอื่น ๆ ทั้งหมดเป็นค่าเริ่มต้น

7. องค์ประกอบแรกขององค์ประกอบลูกแรกคือองค์ประกอบสุดท้ายและองค์ประกอบถัดไปขององค์ประกอบสุดท้ายคือองค์ประกอบแรกซึ่งดำเนินการโดยรายการที่เชื่อมโยงวงกลม

เมื่อเคลื่อนที่ให้ตั้งค่าคุณสมบัติการแปลงขององค์ประกอบลูก. item ไม่ใช่องค์ประกอบหลัก. carousel

HTML & CSS

 // html <div class = carousel onTouchStart => <div class = พื้นหลัง: #3B76C0> </h3> </div> </div> <div class = itemle = backgr ound: #58c03b;> <h3> item- item- item- 2 </h3> </div> <div class = item style = background: #c03b25;> <h3> item-3 </h3> </div> <div class = พื้นหลัง: #e0a718;> <h3> รายการ -4 </h3> </div> <div class = item style = พื้นหลัง: #c03eac;> <h3> item-5 </h3> </div> </div>

 //css.carousel {ความสูง: 50%;

JS

ตั้งสถานะเริ่มต้น

ก่อนอื่นให้ตระหนักถึงรายการที่เชื่อมโยงสองทางเพื่อรักษาองค์ประกอบในองค์ประกอบการหมุน

 ฟังก์ชั่นโหนด (ข้อมูล) {this.data = ข้อมูล; head = null; this.last = null; last = this.head;} ​​else {this.head.prev = node; Node .index = _nodes.length;

ด้วยรายการที่เชื่อมโยงให้สร้างตัวอย่างที่เชื่อมโยงเพิ่มส่วนย่อยลงในรายการที่เชื่อมโยงและตั้งค่าสถานะเริ่มต้นบางอย่าง

 var _container = document.querySelection (. + มี condenterclass); i ++) {list.append (โหนดใหม่ (_items [i]));} var _prev = null; zar _activezindex = _normalzindex + 1; องค์ประกอบที่จะเพิ่ม 1

เมื่อคุณกดนิ้วให้บันทึกตำแหน่งเริ่มต้น

 _container.addeVentListener (TouchStart, ฟังก์ชั่น (e) {// e.preventDefault (); // คำอธิบายประกอบของรหัสบรรทัดนี้จะป้องกันไม่ นิ้วที่เข้มงวด = touch.clienty;

เลื่อนนิ้วของคุณบนหน้าจอและขยับนิ้วของคุณบนหน้า

 _container.addeVentListener (touchmove, ฟังก์ชั่น (e) {// e.preventdefault (); // คำอธิบายประกอบของรหัสบรรทัดนี้จะป้องกันไม่ให้หน้าในองค์ประกอบจากการหมุนในแนวตั้ง การเลื่อนนิ้วในทิศทาง x var deltay = touch.clienty -starty; จะถูกทิ้งไว้และขวา องค์ประกอบซ้ายและขวาของมันในเวลาเดียวกัน moveItems (แปล);

เมื่อนิ้วของคุณออกจากหน้าจอการคำนวณจะอยู่ในหน้าใดในหน้าใด

 _container.addeventListener (touchend, function (e) {// e.preventdefault (); // การยกเลิกรหัสของบรรทัดนี้จะป้องกันการเลื่อนหน้าแนวตั้งในองค์ประกอบ // คำนวณนิ้วเวลาที่จะอยู่บนหน้าจอ var var deltat = new date () ระยะทางเท่าไหร่ระยะทางระหว่างระยะการเลื่อน มากกว่า 50%ของหน้าจอให้กลับไปที่หน้าก่อนหน้าถ้า (Math.Abs ​​(แปล)/_ItemWidth <0.5) {isRollback = true;} anle lement {// ถ้าระยะการเลื่อนมากกว่าหน้าจอ 50%ให้เลื่อนไปที่ หน้าต่อไป translate = แปล <0? -_itemwidth;

เพื่ออำนวยความสะดวกในการใช้งานฉันได้ห่อหุ้มกระบวนการใช้งานทั้งหมดลงในห้องสมุดและเพิ่มวิธี prev (), next () ซึ่งง่ายมาก:

 <สคริปต์ src = lib/carousel.js> </script> createCarousel (Carousel, It, true) .BindTouchEvent () .SetItemChangedHandler (onPageChangeded); // ไม่ว่าการตั้งค่าพารามิเตอร์ที่สามจะต้องเล่นโดยรอบหรือไม่จริงเล่นโดยรอบ

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้