ในทีมฉันถูกถามอย่างกะทันหันว่าจะใช้ภาพม้าหมุนได้อย่างไร ฉันอยู่ในทุ่งส่วนหน้ามานานกว่าหนึ่งปี แต่ฉันไม่ได้เขียนเองมานาน ฉันใช้ปลั๊กอินเพื่อเขียนใน Daniu เสมอ วันนี้ฉันจะเขียนบทช่วยสอนง่ายๆที่เหมาะสำหรับผู้เริ่มต้นที่จะเรียนรู้ แน่นอนว่ามีหลักการดำเนินการมากมายและรูปแบบการออกแบบของไดอะแกรมม้าหมุน สิ่งที่ฉันกำลังพูดถึงที่นี่คือการใช้งานพวกเขาโดยใช้การเขียนโปรแกรมการทำงานที่มุ่งเน้นกระบวนการ เมื่อเทียบกับรูปแบบการออกแบบเชิงวัตถุรหัสจะปรากฏขึ้นอย่างหลีกเลี่ยงไม่ได้และซ้ำซ้อน แต่การขาดสิ่งที่เป็นนามธรรมเชิงวัตถุนั้นเหมาะสำหรับสามเณรที่จะเข้าใจและเรียนรู้ นักเรียนที่อยู่ในค้างคาวหวังว่าจะฉีดน้อยลง คุณยังสามารถให้คำแนะนำเพิ่มเติมได้
หลักการของแผนภาพม้าหมุน:
ชุดรูปภาพที่มีขนาดเท่ากันจะถูกกระเบื้องโดยใช้เค้าโครง CSS เพื่อแสดงภาพเดียวเท่านั้นและส่วนที่เหลือจะถูกซ่อนไว้ การเล่นอัตโนมัติทำได้โดยการคำนวณการชดเชยโดยใช้ตัวจับเวลาหรือสลับรูปภาพโดยคลิกที่เหตุการณ์ด้วยตนเอง
เค้าโครง HTML
ก่อนอื่นคอนเทนเนอร์คอนเทนเนอร์หลักจะเก็บเนื้อหาทั้งหมดและรายการคอนเทนเนอร์ลูกมีรูปภาพ ปุ่ม Subcontainer ปุ่มจัดเก็บจุด
<div id = "container"> <div id = "list" style = "left: -600px;"> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> <img src = "img/2.jpg"/> /> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div id = "buttons"> <span index = "1"> </span> <span = "2" <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "JavaScript:;" id = "prev"> <</a> <a href = "JavaScript:;" id = "next" >> </a> </div>
เพิ่มประสิทธิภาพการเลื่อนที่ไร้รอยต่อ
เมื่อคุณเปลี่ยนจากภาพสุดท้ายเป็นภาพแรกจะมีช่องว่างขนาดใหญ่และใช้ภาพเสริมสองภาพเพื่อเติมเต็มช่องว่างนี้
นี่คือการเลื่อนที่ไร้รอยต่อดูรหัสโดยตรงคัดลอกภาพสุดท้ายก่อนที่จะวางภาพแรกและคัดลอกภาพแรกที่อยู่เบื้องหลังภาพสุดท้าย และซ่อนรูปภาพเสริมภาพแรก (จริง ๆ แล้วภาพที่ห้าแสดงจริงดังนั้นจึงตั้งค่า style = "ซ้าย: -600px;")
การปรับเปลี่ยน CSS
1. การทำความเข้าใจโมเดลกล่องการไหลของเอกสารและปัญหาการวางตำแหน่งที่แน่นอน
2. ให้ความสนใจกับการล้น: ซ่อนรายการรายการ; แสดงภาพของหน้าต่างและซ่อนด้านซ้ายและขวาเท่านั้น
3. ตรวจสอบให้แน่ใจว่าแต่ละชั้นในปุ่มนั้นมียอดและตั้งไว้ที่ด้านบนสุด (z-index: 999)
* {มาร์จิ้น: 0; padding: 0; การกำหนดข้อความ: ไม่มี;} ร่างกาย {padding: 20px;}#คอนเทนเนอร์ {width: 600px; ความสูง: 400px; เส้นขอบ: 3px ของแข็ง#333; overflow: hidden; {width: 600px; ความสูง: 400px; float: ซ้าย;}#ปุ่ม {ตำแหน่ง: สัมบูรณ์; ความสูง: 10px; ความกว้าง: 100px; z-index: 2; ด้านล่าง: 20px; ซ้าย: 250px; 50%; ความเป็นมา: #333; มาร์จิ้น-ขวา: 5px;} #ปุ่ม. บน {พื้นหลัง: Orangered;}. ลูกศร {เคอร์เซอร์: ตัวชี้; แสดง: ไม่มี; บรรทัด-สูง: 39px; text-align: center; font-size: 36px; 180px; พื้นหลังสี: rgba (0, 0, 0, .3); สี: #fff;}. ลูกศร: โฮเวอร์ {พื้นหลัง-สี: rgba (0, 0, 0, .7);}#คอนเทนเนอร์: โฮเวอร์.JS
ก่อนอื่นเราจะตระหนักถึงผลกระทบของการคลิกลูกศรซ้ายและขวาด้วยตนเองเพื่อสลับรูปภาพ:
window.onload = function () {var list = document.getElementById ('list'); var prev = document.getElementById ('prev'); var next = document.getElementById ('ถัดไป'); ถูกปัดเศษด้วย parseint () เพื่อแปลงเป็นตัวเลข var newleft = parseInt (list.style.left) + ออฟเซ็ต; list.style.left = newleft + 'px';} prev.onclick = ฟังก์ชั่น () {animate (600);} next.onclick = function () {animate (-600);}};หลังจากทำงานแล้วเราจะพบว่าหากคุณคลิกที่ลูกศรขวาจะมีช่องว่างและคุณไม่สามารถกลับไปที่ภาพแรกได้ คลิกลูกศรซ้ายเพื่อกลับไปที่ภาพแรก
การใช้ Google Chrome F12 เหตุผลก็คือเราใช้ออฟเซ็ตที่เหลือเพื่อรับรูปภาพ เมื่อเราเห็นว่าค่าเหลือน้อยกว่า 3600 จะมีช่องว่างถ้าไม่มีภาพที่ 8 ดังนั้นเราต้องตัดสินเกี่ยวกับการชดเชยที่นี่
เพิ่มย่อหน้านี้ลงในฟังก์ชั่นเคลื่อนไหว:
if (newleft <-3000) {list.style.left = -600 + 'px';} ถ้า (newleft> -600) {list.style.left = -3000 + 'px';}ตกลงเรียกใช้มันไม่มีปัญหา ภาพม้าหมุนตามชื่อที่แนะนำคือรูปภาพที่คุณสามารถย้ายได้ ในเวลานี้เราต้องใช้ตัวจับเวลาวัตถุในตัวของเบราว์เซอร์
สำหรับตัวจับเวลาจำเป็นต้องอธิบายความแตกต่างระหว่าง setInterval () และ settimeout ใส่ง่ายๆ setInterval () จะดำเนินการหลายครั้งและ setTimeOut () จะดำเนินการเพียงครั้งเดียว
สำหรับการใช้งานที่เฉพาะเจาะจงมากขึ้นคุณสามารถคลิกลิงก์เพื่อดูความแตกต่าง: window.setInterval window.settimeout
ที่นี่เราใช้ setInterval () เพราะภาพของเราต้องมีการเลื่อนวนรอบ แทรกด้านล่าง
var timer; function play () {timer = setInterval (function () {prev.onclick ()}, 1500)} play ();วิ่งโอเค!
อย่างไรก็ตามเมื่อเราต้องการดูภาพบางอย่างอย่างระมัดระวังเราต้องหยุดภาพและเราสามารถล้างตัวจับเวลาได้ วิธีนี้ใช้ที่นี่
ที่นี่เราจำเป็นต้องใช้งานบน DOM และจำเป็นต้องได้รับพื้นที่แผนที่ม้าหมุนทั้งหมด
var container = document.getElementById ('container'); ฟังก์ชั่นหยุด () {clearInterval (ตัวจับเวลา);} container.onmouseover = หยุด; container.onmouseout = play;แต่ที่นี่ภาพม้าหมุนนั้นเสร็จสมบูรณ์แล้วและนักเรียนบางคนจะถามดังนั้นมันจึงง่ายมาก คุณเห็นแถวของจุดเล็ก ๆ ใต้ภาพหรือไม่? ฉันได้เพิ่มคุณสมบัติให้คุณแล้ว
- -
นี่คือเวอร์ชันที่อัพเกรด:
var buttons = document.getElementById ('ปุ่ม'). getElementsByTagname ('span'); var index = 1; ปุ่มฟังก์ชัน () {// สไตล์ก่อนหน้านี้จำเป็นต้องล้างสำหรับ (var i = 0; i <buttons.length; i ++) {ถ้า (ปุ่ม [i] อาร์เรย์เริ่มต้นจาก 0 ดังนั้นความต้องการดัชนี -1buttons [ดัชนี -1] .className = 'on';} prev.onclick = function () {index -= 1; ถ้า (ดัชนี <1) {index = 5;} ปุ่ม (); เรามีเพียง 5 จุดเล็ก ๆ ดังนั้นเราต้องสร้างดัชนีการตัดสิน += 1; ถ้า (ดัชนี> 5) {index = 1;} buttonsshow (); animate (-600);}ตอนนี้ดูเหมือนปกติมากขึ้น แต่เราต้องการคลิกที่หนึ่งในจุดเล็ก ๆ ตลอดเวลาด้วยเมาส์และเปลี่ยนไปใช้ภาพที่เกี่ยวข้อง หลักการเดียวกันนี้คือเรายังต้องค้นหาภาพที่เกี่ยวข้องผ่านทางชดเชย
สำหรับ (var i = 0; i <buttons.length; i ++) {ปุ่ม [i] .onclick = function () {// การปรับให้เหมาะสมคลิกจุดปัจจุบันในภาพปัจจุบันและไม่เรียกใช้รหัสต่อไปนี้ if (this.className == "on") {return;}/* ออฟเซ็ตรับ: ที่นี่คุณจะได้รับตำแหน่งที่เมาส์ย้ายไปที่จุดใช้สิ่งนี้เพื่อผูกดัชนีกับปุ่มวัตถุ [i] ไปที่ Google การใช้งานนี้* //* เนื่องจากดัชนีที่กำหนดเอง ParseInt (this.getAttribute ('index')); var Offset = 600 * (ClickIndex - ดัชนี); animate (ออฟเซ็ต); // จัดเก็บตำแหน่งหลังจากการคลิกเมาส์และใช้เพื่อแสดงจุดเป็นดัชนีปกติ = clickindex; buttonsshow ();}}}}}}}}}}}}}}ทุกคนคุณอาจค้นพบว่าภาพม้าหมุนนี้ค่อนข้างแปลกและคาดเดาไม่ได้ มันสลับไปทางซ้ายดังนั้นจึงเขียนใหม่:
ฟังก์ชั่น play () {// สลับภาพม้าหมุนเพื่อสลับภาพเป็นตัวจับเวลาด้านขวา = setInterval (function () {next.onclick ();}, 2000)} <! doctype html> <html> <head> <meta charset = "utf-8"> <title> 0; การกำหนดข้อความ: ไม่มี;} ร่างกาย {padding: 20px;}#คอนเทนเนอร์ {width: 600px; ความสูง: 400px; เส้นขอบ: 3px ของแข็ง#333; overflow: hidden; ตำแหน่ง:}#รายการ {width: 4200px; ความสูง: 400px; 400px; float: ซ้าย;} #ปุ่ม {ตำแหน่ง: Absolute; ความสูง: 10px; ความกว้าง: 100px; z-index: 2; ด้านล่าง: 20px; ซ้าย: 250px;} #ปุ่มขยาย {เคอร์เซอร์: ตัวชี้; 5px;}#buttons .on {พื้นหลัง: Orangered;}. Arrow {Cursor: Pointer; Display: None; Line-Height: 39px; Text-Align: Center; Font-Size: 36px; Font-Weight: BOLD; WIDTH: 40PX; 0, .3); สี: #FFF;}. ลูกศร: โฮเวอร์ {พื้นหลัง-สี: rgba (0, 0, 0, .7);}#คอนเทนเนอร์: โฮเวอร์. Arrow {แสดง: บล็อก;}#prev {ซ้าย: 20px;}#next {ขวา: 20px;} เหตุการณ์ DOM*//*ตัวจับเวลา*/window.onload = function () {var container = document.getElementById ('container'); var list = document.getElementById ('รายการ'); ปุ่ม var = document.getElementById ('ปุ่ม') index = 1; var timer; ฟังก์ชั่น animate (ออฟเซ็ต) {// สิ่งที่ได้รับคือ style.left ซึ่งเป็นระยะทางที่จะได้รับเทียบกับซ้ายดังนั้นหลังจากภาพแรก style.left เป็นลบทั้งหมด // และ styleft.left เป็นสตริงซึ่งจะต้องโค้งมนด้วย parseint () เพื่อแปลงเป็นตัวเลข var newleft = parseInt (list.style.left) + ออฟเซ็ต; list.style.left = newleft + 'px'; // การตัดสินการเลื่อนแบบไม่สิ้นสุดถ้า (newleft> -600) {list.style.left = -3000 + 'px'; play () {// timer execution ซ้ำ = setInterval (function () {next.onclick ();}, 2000)} ฟังก์ชั่นหยุด () {clearInterval (ตัวจับเวลา);} ปุ่มฟังก์ชั่น show () {// ล้างรูปแบบของจุดเล็ก ๆ ก่อนหน้าสำหรับ (var i = 0; i <buttons.length; {ปุ่ม [i] .className = "";}} // อาร์เรย์เริ่มต้นจาก 0 ดังนั้นดัชนีความต้องการ -1Buttons [ดัชนี -1] .className = "on";} prev.onclick = ฟังก์ชัน () {ดัชนี -= 1; ถ้า (ดัชนี <1) {ดัชนี = 5} จากตัวจับเวลาด้านบนดัชนีจะเพิ่มขึ้นอย่างต่อเนื่อง เรามีเพียง 5 จุดเล็ก ๆ ดังนั้นเราต้องสร้างดัชนีการตัดสิน+= 1; ถ้า (ดัชนี> 5) {index = 1} animate (-600); buttonsshow ();}; สำหรับ (var i = 0; i <buttons.length; i ++) {buttons [i]. if (this.className == "on") {return;}/* ที่นี่เราได้รับตำแหน่งที่เมาส์ย้ายไปที่จุดใช้สิ่งนี้เพื่อผูกดัชนีกับปุ่มวัตถุ [i] ไปที่ Google การใช้งานนี้* //* เนื่องจากดัชนีที่นี่เป็นแอตทริบิวต์ที่กำหนดเอง ParseInt (this.getAttribute ('index')); var Offset = 600 * (ClickIndex - ดัชนี); // ดัชนีนี้เป็น indexanimate (ชดเชย); index = clickindex; // จัดเก็บตำแหน่งหลังการคลิกเมาส์และใช้เพื่อแสดง dotsshow ();}} container.onmouseover = หยุด; container.onmouseout = play; play ();} </script> </head> <body> <div id = "container"> <div id = "list" src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "JavaScript:;" id = "prev"> </a> <a href = "JavaScript:;" id = "next" >> </a> </div> </body> </html>ด้านบนเป็นรหัสม้าหมุน JS ที่เรียบง่ายแนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!