ไดอะแกรมม้าหมุนยังคงค่อนข้างธรรมดาในแอปพลิเคชันในอนาคตและสามารถนำไปใช้งานได้โดยไม่ต้องใช้รหัสมาก แต่ถ้าคุณควบคุมความรู้พื้นฐานของ JS เท่านั้นคุณจะใช้วิธีการเชิงตรรกะที่น้อยลงและเรียบง่ายเพื่อให้บรรลุได้อย่างไร นี่คือแนวทางปฏิบัติที่แตกต่างกัน:
1. ใช้วิธีการกระจัดเพื่อให้บรรลุ
ก่อนอื่นเราสามารถเพิ่ม div ลงในร่างกายและตั้งค่าความกว้างเป็นเปอร์เซ็นต์ (หน้าแบบปรับตัว) หากสัดส่วนมีความเฉพาะเจาะจงกับเปอร์เซ็นต์ที่สัมพันธ์กันเราจะทำตามความต้องการ ฉันจะไม่พูดมากที่นี่ ใส่ภาพลงใน div
ประการที่สองชิ้นส่วนสไตล์ตั้งค่าแท็ก IMG ทั้งหมดเป็นแบบสัมบูรณ์เพื่ออำนวยความสะดวกในการวางตำแหน่ง
ในที่สุด JS Part พูดถึงตรรกะโดยกำหนดอาร์เรย์ว่างสองอัน อาร์เรย์แรกใช้เพื่อบันทึกภาพเริ่มต้นที่แสดงบนหน้าและรูปภาพที่รอเพื่อเข้าและอาร์เรย์ที่สองจะบันทึกภาพ N ที่เหลืออยู่ สมมติว่าอาร์เรย์ทั้งสองนี้ถูกตั้งค่าเป็น: waittoshow = []; และ goout = []; waittoshow.shift (); หากภาพแรกมีชื่อว่า SHOWFIRST และเวลาการกระจัดและการเคลื่อนไหวจะถูกตั้งค่าสำหรับภาพ SHOWFIRST หลังจากการดำเนินการเสร็จสมบูรณ์แล้วให้วางโชว์เฟิร์ตลงในหางของ GOOUT: GOOUT.PUSH (SHOWFIRST); ในเวลานี้องค์ประกอบที่ 0 ของอาร์เรย์ Waittoshow กลายเป็นภาพที่สองดั้งเดิมที่จะแสดง ตั้งค่าการกระจัดและเวลาการเคลื่อนไหวสำหรับภาพนี้ waittoshow [0] และปรากฏขึ้นภาพองค์ประกอบแรกของอาร์เรย์ goout และนำไปไว้ในหางของอาร์เรย์ Waittoshow เพื่อให้แน่ใจว่าอาร์เรย์ Waittoshow นั้นเป็นภาพที่แสดงและภาพที่จะแสดง ด้วยวิธีนี้อาร์เรย์ทั้งสองจะวนวนเพื่อให้การดำเนินการของภาพหมุน ตรรกะย้อนกลับเหมือนกัน (เนื่องจากตรรกะนั้นซับซ้อนเกินไปจึงไม่แนะนำที่นี่)
2. วิธีการใช้ระดับของลำดับชั้นเพื่อเปลี่ยนภาพด้านบน (วิธีนี้ไม่มีการกระทำการกระจัด แต่ตรรกะนั้นง่ายมากและใช้งานได้จริง)
มันใช้งานง่ายกว่ารหัสโดยตรง: โดยทั่วไปทุกบรรทัดมีความคิดเห็น
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> ไดอะแกรม Carousel (แฟลชปรับตัว) </title> <style media = "หน้าจอ">* {margin: 0; padding: 0;}. Absolute;/*z-index: 10;*/} อินพุต {border: 1px lightgray ของแข็ง; ความกว้าง: 50px; ความสูง: 30px; พื้นหลัง: สีแดง; border-radius: 5px; font-size: 20px;} </style> </head> <body> /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> </div> <อินพุต type = "ปุ่ม" id = "butleft" name = "name" value = "◀︎"> องค์ประกอบรูปภาพเพื่อสร้างอาร์เรย์สตริง อาร์เรย์สตริงไม่สามารถดำเนินการป๊อปสปอตหรือการดำเนินการอื่น ๆ // ดังนั้นจึงจำเป็นต้องเรียกคืนค่าของมันลงในอาร์เรย์โดยมีคำจำกัดความหลังจากนั้นภาพ var = document.getElementSbyTagname ('img'); var butleft = document.getElementById ('butleft'); 1000; // รับอาร์เรย์ที่ว่างเปล่าเพื่อเก็บองค์ประกอบสตริงไว้ในภาพภาพ var images = [] // สำหรับลูปถูกใช้เพื่อกำหนดค่าให้กับอาร์เรย์จินตนาการและเปลี่ยนระดับขององค์ประกอบในอาร์เรย์สำหรับ (var i = 0; i <images.length; i ++) {imagess [i] = images [i]; พวกเขา. ยิ่งภาพสูงขึ้นเท่าใดการตั้งค่าระดับก็จะสูงขึ้นดังนั้นภาพจะมาจากภาพแรกและภาพที่สองตามลำดับ ... ลงตามลำดับ currentImage.style.zindex = -i;} // ตั้งค่าตัวนับให้ทำการคลิก (ซ้ายหรือขวา) = imagess.shift (); // ตั้งค่าระดับสำหรับองค์ประกอบภาพที่โผล่นั่นคือ -1000 + นับ // ทำให้ระดับที่เล็กที่สุดเมื่อเทียบกับองค์ประกอบอื่น ๆ ภาพที่โผล่ขึ้นมาที่หัวของอาร์เรย์จะแสดงที่ด้านล่างของการแสดง เมื่อเพิ่ม 1 อย่าพิจารณาค่าเฉพาะเพียงคลิกเหตุการณ์บวก 1 count ++;} // คลิกเหตุการณ์ไปทางขวา butright.onclick = function () {// ป๊อปอัพองค์ประกอบจากหางของภาพและกำหนดให้ showfirstvar showfirst = imagess.pop (); showfirst.style.zindex = index+count; // หลังจากการเปลี่ยนแปลงระดับให้แทรกลงในหัวของอาร์เรย์อาร์เรย์อิมเมจภาพ unshift (showfirst); // คลิกหนึ่งครั้งเพื่อเพิ่ม 1count ++;} </script> </html>บทความที่ต้องอ่านข้างต้นเกี่ยวกับ JS พื้นฐาน (การใช้งานง่าย ๆ ของการคลิกเหตุการณ์ Carousel) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น