ฉันเขียนม้าหมุนสามภาพด้วยตัวเอง หนึ่งถูกนำไปใช้ใน JS ดั้งเดิมที่เรียบง่ายและไม่มีเอฟเฟกต์ภาพเคลื่อนไหว อื่น ๆ ถูกนำไปใช้ร่วมกับ jQuery และเปลี่ยนเข้าและออก ตอนนี้ฉันต้องการสร้างเครื่องทำความเย็นในบล็อกหรือเว็บไซต์ส่วนตัวของฉันและฉันสามารถแสดงผลงานของตัวเองได้ในเวลานั้น หลังจากซื้อของใน MOOC สักพักฉันก็พบว่ามีหลักสูตรปลั๊กอิน JQuery Carousel ซึ่งค่อนข้างเจ๋งดังนั้นฉันจึงคิดเกี่ยวกับการห่อหุ้มมันใน JS พื้นเมือง หลังจากทำมันก็ไม่ง่ายอย่างที่ฉันคิด - - อย่าพูดถึงเรื่องนี้อีกต่อไปขออธิบายกระบวนการดำเนินการ
2. เอฟเฟกต์
เพราะเซิร์ฟเวอร์ของฉันยังไม่ได้ติดตั้ง ไม่มีการสาธิตออนไลน์ (Orz ... ) ดังนั้นฉันจึงสามารถทำการเรนเดอร์ได้เท่านั้น
เอฟเฟกต์โดยประมาณยังสามารถมองเห็นได้จากรูปภาพดังนั้นฉันจะไม่พูดอะไรมากมาย หากคุณต้องการดูเอฟเฟกต์รหัสจริงยินดีต้อนรับสู่รหัสดาวน์โหลด github ของฉัน อย่าลืมให้ดาวในโครงการ GitHub ของฉัน^_^
iii. กระบวนการดำเนินการ
โครงสร้าง HTML
<div data-setting = '{"width": 1000, "ความสูง": 400, "CarrouselWidth": 750, "Carrouselheight": 400, "Scale": 0.9, "Verticalalign": "Middle"}'> <div> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a>โครงสร้างนี้เหมือนกับโครงสร้างรหัส HTML ของม้าหมุนทั่วไป ความแตกต่างเล็กน้อยคือมีคุณสมบัติการตั้งค่าข้อมูลใน Div Main Carousel Div ซึ่งมีพารามิเตอร์เอฟเฟกต์ม้าหมุน ความสำคัญเฉพาะของพารามิเตอร์จะได้รับการอธิบายในภายหลัง
รหัสสำหรับส่วน CSS จะไม่ถูกโพสต์ สิ่งที่สำคัญที่สุดคือการให้ความสนใจกับตำแหน่งที่แน่นอนขององค์ประกอบ ดังที่เห็นได้จากการเรนเดอร์ตำแหน่งและขนาดของแต่ละภาพแตกต่างกันดังนั้นสิ่งเหล่านี้จะถูกควบคุมผ่าน JS ดังนั้นจึงจำเป็นต้องกำหนดตำแหน่งสัมบูรณ์ มามุ่งเน้นไปที่กระบวนการดำเนินการของ JS
กระบวนการดำเนินการ JS
มาพูดถึงขั้นตอนสำคัญสองสามขั้นตอนใน JS หลังจากทำตามขั้นตอนเหล่านี้ไม่ควรมีปัญหา
พารามิเตอร์①default
เนื่องจากเป็นปลั๊กอินแพ็คเกจจึงมีค่าเริ่มต้นบางอย่างสำหรับพารามิเตอร์ที่ต้องกำหนดค่า ในปลั๊กอินนี้พารามิเตอร์ต่อไปนี้ส่วนใหญ่:
ความกว้าง: 1,000, // ความกว้างของพื้นที่สไลด์
ความสูง: 400, // ความสูงของพื้นที่สไลด์
Carrouselwidth: 700, // ความกว้างของเฟรมแรกของสไลด์
Carrouselheight: 400, // ความสูงของเฟรมแรกของสไลด์
มาตราส่วน: 0.9, // บันทึกความสัมพันธ์ของมาตราส่วนตัวอย่างเช่นความกว้างและความสูงของภาพที่สองมีขนาดเล็กกว่าภาพแรกเมื่อแสดง
Autoplay: จริง // มันเล่นโดยอัตโนมัติหรือไม่?
TimeSpan: 3000, // ช่วงเวลาเล่นอัตโนมัติ
Verticalalign: 'กลาง' // การจัดตำแหน่งภาพมีสามวิธี: ด้านบน/กลาง/ล่าง, ค่าเริ่มต้นคือกลาง
②encapsulateวัตถุ
เนื่องจากเว็บไซต์อาจใช้ปลั๊กอินม้าหมุนเดียวกันในหลาย ๆ ที่บรรจุภัณฑ์จึงสำคัญ หลังจากกำหนดวัตถุนี้หากคุณกำหนดวิธีการเริ่มต้นสำหรับวัตถุคุณสามารถสร้างวัตถุหลายชิ้น คุณเพียงแค่ต้องผ่าน DOM เดียวกันของคลาสทั้งหมดในนั้น ดังนั้นวิธีการเริ่มต้นของฉันมีดังนี้:
carousel.init = function (Carrousels) {var _this = this; // แปลง Nodelist เป็นอาร์เรย์ var cals = toarray (Carrousels); <br> /*เนื่องจาก JS ดั้งเดิมได้รับคลาสทั้งหมดสิ่งที่คุณได้รับคือ Nodelist ซึ่งเป็นอาร์เรย์คลาส หากคุณต้องการใช้วิธีอาร์เรย์คุณต้องแปลงเป็นอาร์เรย์จริง ที่นี่ Toarray เป็นวิธีการแปลง */ cals.foreach (ฟังก์ชั่น (รายการ, ดัชนี, อาร์เรย์) {ใหม่ _this (รายการ);}); -ด้วยวิธีนี้เมื่อฉันอยู่บน window.onload ฉันเรียก carrousel.init (document.querySelectorall ('. Carrousel-main')); วิธีนี้ฉันสามารถสร้างม้าหมุนหลายตัว!
③เริ่มต้นพารามิเตอร์ตำแหน่งของเฟรมแรก
เนื่องจากพารามิเตอร์ที่เกี่ยวข้องของเฟรมทั้งหมดหลังจากเฟรมแรกถูกกำหนดโดยอ้างอิงถึงเฟรมแรกจึงเป็นสิ่งสำคัญที่จะกำหนดเฟรมแรกได้ดี
setValue: function () {this.carrousel.style.width = this.settings.width+'px'; this.carrousel.style.height = this.settings.height+'px'; /*การตั้งค่าปุ่มซ้ายและซ้ายที่นี่พื้นที่หลังจากปุ่มซ้ายและขวาถูกลบออกจากความกว้างของเฟรมแรก z-index สูงกว่ารูปภาพทั้งหมดยกเว้นเฟรมแรกและรูปภาพจะถูกวางไว้ซ้ายและขวาดังนั้นค่าของดัชนี Z คือครึ่งหนึ่งของจำนวนรูปภาพ */ var btnw = (this.settings.width- this.settings.carrouselwidth)/ 2; this.prebtn.style.width = btnw+'px'; this.prebtn.style.height = this.settings.height+'px'; this.prebtn.style.zindex = math.ceil (this.carrouselitems.length/2); this.nextbtn.style.width = btnw+'px'; this.nextbtn.style.height = this.settings.height+'px'; this.nextbtn.style.zindex = math.ceil (this.carrouselitems.length/2); // การตั้งค่าที่เกี่ยวข้องกับเฟรมแรกนี้ carrouselfir.style.left = btnw+'px'; this.carrouselfir.style.top = this.setcarrouselalign (this.settings.carrouselheight)+'px'; this.carrouselfir.style.width = this.settings.carrouselwidth+'px'; this.carrouselfir.style.height = this.settings.carrouselheight+'px'; this.carrouselfir.style.zindex = math.floor (this.carrouselitems.length/2);},},ที่นี่เมื่อใช้วัตถุใหม่ให้ไปที่โหนด DOM เพื่อรับพารามิเตอร์การตั้งค่าข้อมูลจากนั้นอัปเดตการกำหนดค่าพารามิเตอร์เริ่มต้น มีสถานที่ที่ควรทราบที่นี่ คุณไม่สามารถอัปเดตพารามิเตอร์เริ่มต้นโดยตรงโดยการกำหนดค่าเมื่อได้รับพารามิเตอร์เนื่องจากเมื่อผู้ใช้กำหนดค่าพารามิเตอร์พารามิเตอร์ทั้งหมดอาจไม่ได้รับการกำหนดค่าหนึ่งครั้ง หากค่าถูกกำหนดโดยตรงและผู้ใช้จะได้รับการกำหนดค่าพารามิเตอร์จะหายไป ที่นี่ฉันเขียนวิธีการขยายวัตถุคล้ายกับวิธี $. extend ใน jQuery เพื่ออัปเดตพารามิเตอร์ ฉันจะไม่แสดงรายละเอียดหากคุณสนใจคุณสามารถดาวน์โหลดได้
④การตั้งค่าตำแหน่งรูปภาพอื่น ๆ
ภาพที่นี่เป็นภาพยกเว้นภาพแรกแบ่งออกเป็นสองภาพซ้ายและขวาและตำแหน่งภาพทางด้านซ้ายและภาพด้านขวาจะแตกต่างกันดังนั้นจึงจำเป็นต้องกำหนดค่าแยกต่างหาก:
// ตั้งค่าความสัมพันธ์ตำแหน่งของภาพบน var ขวา rightIndex = ระดับ; Rightleice.foreach (ฟังก์ชั่น (รายการ, ดัชนี, อาร์เรย์) {rightIndex--; var i = index; rw = rw*carrouselself.settings.scale; // ภาพทางด้านขวา ของ z-index ทางด้านขวามีขนาดเล็กลงและจำนวนรูปภาพสามารถลดลงได้โดยใช้จำนวนรูปภาพทั่วไป style.width = rw+'px'; // วิธีการคำนวณช่องว่างที่นี่คือ: ลบความกว้างเฟรมแรกหาร 2 แล้วหารจำนวนรูปภาพในรายการซ้ายหรือขวา style.left = (constoffset+(++ ดัชนี)*gap-rw)+'px'; item.style.top = Carrouselself.setCarrouselalign (rh)+'px';});วิธีการตั้งค่าทางด้านซ้ายนั้นคล้ายกันและง่ายกว่าดังนั้นฉันจะไม่เข้าไปดูรายละเอียด
⑤ปรับขนาดตำแหน่งของรูปภาพทั้งหมดในระหว่างการหมุน
ขั้นตอนนี้สำคัญมาก การคลิกที่ปุ่มถัดไปที่ปุ่มขวาคือการหมุนซ้ายและคลิกที่ปุ่มก่อนหน้าในปุ่มซ้ายคือการหมุนที่ถูกต้อง ในเวลานี้เราเพียงแค่ต้องคำนึงถึงรูปภาพทั้งหมดเป็นแหวนคลิกหนึ่งครั้งเปลี่ยนตำแหน่งและทำการหมุนให้เสร็จสมบูรณ์ โดยเฉพาะเมื่อหมุนการหมุนซ้ายให้ทำพารามิเตอร์ของภาพที่สองเท่ากับภาพแรกภาพที่สามเท่ากับภาพที่สอง ... และภาพสุดท้ายเท่ากับภาพแรก เมื่อหมุนไปทางขวาให้ทำพารามิเตอร์ของภาพแรกเท่ากับภาพที่สองพารามิเตอร์ของภาพที่สองเท่ากับภาพที่สาม ... และพารามิเตอร์ของภาพสุดท้ายเท่ากับภาพแรก
พูดคุยเกี่ยวกับการหมุนซ้ายที่นี่
if (dir == 'left') {toarray (this.carrouselitems) .foreach (ฟังก์ชั่น (รายการ, ดัชนี, อาร์เรย์) {var pre; ถ้า (ดัชนี == 0) {// ตัดสินว่ามันเป็น pre = _this.carrousellat; zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second รูปภาพหมายถึงภาพแรกและเมื่อเปลี่ยนไปด้วยวิธีนี้จะต้องมีการบันทึกภาพแรกไว้ก่อน item.style.left; function_this.rotateflag = true;});การหมุนที่นี่จะดูแข็งหากคุณไม่ได้ใช้แอนิเมชั่นมากเกินไป แต่ JS พื้นเมืองไม่มีฟังก์ชั่นภาพเคลื่อนไหวที่นี่ฉันเขียนฟังก์ชั่นแอนิเมชั่นเลียนแบบด้วยตัวเอง หลักการคือการได้รับค่าสไตล์ดั้งเดิมของ DOM และเปรียบเทียบกับค่าที่ผ่านใหม่ ใช้วิธีการบางอย่างเพื่อกำหนดความเร็ว ความเร็วของฉันที่นี่คือการแบ่งความแตกต่างของ 18 อย่างไรก็ตามกำหนดตัวจับเวลาและอ้างอิงช่วงเวลาในซอร์สโค้ด jQuery เพื่อดำเนินการทุก ๆ 13 มิลลิวินาที จากนั้นตัวจับเวลาจะชัดเจนทุกครั้งที่มีการเพิ่มค่าสไตล์ดั้งเดิมลงในค่าที่เข้ามา สำหรับรายละเอียดโปรดดูที่นี่
โอเคประเด็นสำคัญเกือบจะเหมือนกันและควรเป็นเรื่องง่ายถ้าคุณเข้าใจกระบวนการเหล่านี้!
4. สรุปและการสะท้อนกลับ
สรุป:
โดยส่วนตัวแล้วฉันคิดว่านี่เป็นปลั๊กอินที่เข้าใจง่าย มันค่อนข้างง่ายที่จะทำร่วมกับ jQuery อย่างไรก็ตามถ้าคุณเขียนจากต้นฉบับคุณยังรู้สึกราบรื่นน้อยลง มันควรจะเป็นภาพเคลื่อนไหวที่กำหนดเองไม่ดีเท่าภาพเคลื่อนไหวที่ถูกห่อหุ้มด้วย jQuery
นอกจากนี้เนื่องจากภาพจะต้องแบ่งออกอย่างเท่าเทียมกันทั้งสองด้านของด้านซ้ายและด้านขวาสำหรับจำนวนภาพที่ใช้กันได้วิธีที่ใช้ในที่นี้คือโคลนภาพแรกจากนั้นเพิ่มลงในตอนท้ายและสร้างตัวเลขคี่
คิด:
หากมีข้อผิดพลาดนั่นหมายความว่าฉันกำหนดธง RotateFlag เพื่อตรวจสอบว่าสามารถหมุนได้ในขณะนี้หรือไม่ซึ่งเป็นการป้องกันไม่ให้คุณติดตามการคลิกที่รวดเร็ว เมื่อฉันกดฉันตั้งค่า RotateFlag เป็น FALSE จากนั้นตั้งค่า RotateFlag เป็น TRUE หลังจากแอนิเมชั่นสิ้นสุดลง แต่ดูเหมือนว่าเอฟเฟกต์จะไม่ชัดเจน ฉันหวังว่าอาจารย์ที่เกี่ยวข้องจะให้คำแนะนำกับฉันและทุกคนจะก้าวหน้าไปด้วยกัน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ สำหรับเนื้อหาเพิ่มเติมโปรดดูที่: สรุปผลกระทบของภาพหมุนของ JavaScript Picture ขอบคุณสำหรับการอ่าน