ที่จุดเริ่มต้นของส่วนหน้าแบ่งปันกระบวนการใช้งานของซากศพหน้าจอสัมผัสบนโทรศัพท์มือถือ
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 เหตุการณ์สัมผัสที่มีผลผูกพัน เหตุการณ์ TouchStartเมื่อคุณกดนิ้วให้บันทึกตำแหน่งเริ่มต้น
_container.addeVentListener (TouchStart, ฟังก์ชั่น (e) {// e.preventDefault (); // คำอธิบายประกอบของรหัสบรรทัดนี้จะป้องกันไม่ นิ้วที่เข้มงวด = touch.clienty; เหตุการณ์ touchmoveเลื่อนนิ้วของคุณบนหน้าจอและขยับนิ้วของคุณบนหน้า
_container.addeVentListener (touchmove, ฟังก์ชั่น (e) {// e.preventdefault (); // คำอธิบายประกอบของรหัสบรรทัดนี้จะป้องกันไม่ให้หน้าในองค์ประกอบจากการหมุนในแนวตั้ง การเลื่อนนิ้วในทิศทาง x var deltay = touch.clienty -starty; จะถูกทิ้งไว้และขวา องค์ประกอบซ้ายและขวาของมันในเวลาเดียวกัน moveItems (แปล); เหตุการณ์ touchendเมื่อนิ้วของคุณออกจากหน้าจอการคำนวณจะอยู่ในหน้าใดในหน้าใด
_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); // ไม่ว่าการตั้งค่าพารามิเตอร์ที่สามจะต้องเล่นโดยรอบหรือไม่จริงเล่นโดยรอบ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้