1. หลักการดำเนินการ
(1) วางรูปภาพทั้งหมดในตู้คอนเทนเนอร์หลักและตั้งค่าลักษณะและซ่อนรูปภาพผ่านแอตทริบิวต์การแสดงผล
(2) แผนภาพม้าหมุนแบ่งออกเป็นม้าหมุนด้วยตนเองและม้าหมุนอัตโนมัติ
โฟกัสของม้าหมุนด้วยตนเองคือคลิกที่วงกลมเล็ก ๆ ด้านล่างภาพทุกครั้งที่คุณคลิกรับหมายเลขดัชนีและปล่อยให้ภาพที่มีหมายเลขดัชนีที่สอดคล้องกันจะปรากฏขึ้นและวงกลมเล็ก ๆ ในเวลานี้จะถูกเน้น;
ม้าหมุนอัตโนมัติ: ใช้ตัวจับเวลา setInterval () เพื่อเล่นภาพทุกครั้ง
(3) ความรู้พื้นฐานทั้งหมด: การดำเนินการ DOM, ตัวจับเวลา, แอปพลิเคชันกิจกรรม
2. เค้าโครงหน้าภาพม้าหมุน:
<div id = "content"> <!-คอนเทนเนอร์พาเรนต์ทั้งหมด-> <div> <!-คอนเทนเนอร์ที่มีรูปภาพ-> <div> <img src = "./ img/lunbo1.jpg"> </div> <div> <img src = " src = "./ img/lunbo3.jpg"> </div> <!-วงกลมบ่งชี้ด้านล่างภาพ-> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <! href = "#"> <span>> </span> </a> </div>
3. รูปแบบ CSS ของแผนภาพม้าหมุน:
#CONTENT {ความกว้าง: 100%; ความสูง: 500px; ตำแหน่ง: สัมพัทธ์;}. Carousel-inner {ตำแหน่ง: สัมพัทธ์; ความกว้าง: 100%; overflow: ซ่อน; ความสูง: 500px; } .carousel-inner> .item> img {display: block; ความสูงบรรทัด: 1; z-index: 1;}. carousel-indicators {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 10px; ซ้าย: 45%; z-index: 2; รายการสไตล์รายการ: ไม่มี;}. carousel-indicators li {แสดง: inline-block; เคอร์เซอร์: ตัวชี้; z-index: 2;}. Active1 {font-size: 28px; color: #fff;}. carousel-control {ตำแหน่ง: สัมบูรณ์; การกำหนดข้อความ: ไม่มีสี: #999; Font-Weight: BOLD; 3;}. carousel-control: Hover {color: fff; การกำหนดข้อความ: ไม่มี; opacity: .9; sutline: none; font-size: 42px;}. prev {top: 30%; ซ้าย: 20px; } .next {Top: 30%; ขวา: 20px;}4. รหัสการใช้งาน JS สำหรับแผนภาพ Carousel:
window.onload = function () {// การเริ่มต้น Carousel var lunbo = document.getElementById ('เนื้อหา'); var imgs = lunbo.getElementByTagname ('img'); var uls = lunbo.getElementsByTagname ('ul'); var lis = lunbo.getElementsByTagname ('li'); // ในสถานะเริ่มต้นวงกลมอยู่ในโหมดไฮไลต์ lis [0] .style.fontsize = '26px'; lis [0] pic_index = 1; // ม้าหมุนอัตโนมัติ ใช้ pic_time เพื่อบันทึกการเล่นคุณสามารถใช้ ClearInterval () เพื่อล้างได้ตลอดเวลา var pic_time = setInterval (autobofang, 3000); // ม้าหมุนด้วยตนเองสำหรับ (var i = 0; i <lis.length; i ++) {lis [i] .addeventListener ("mouseover", การเปลี่ยนแปลง, เท็จ); var children = target.parentNode.children; สำหรับ (var i = 0; i <children.length; i ++) {ถ้า (target == เด็ก [i]) {picchange (i); }}} // ฟังก์ชั่นการสลับรูปภาพฟังก์ชั่น picchange (i) {// ปล่อยให้รูปภาพทั้งหมดไม่ปรากฏและวงกลมทั้งหมดมีสไตล์ปกติสำหรับ (var j = 0; j <imgs.length; j ++) {imgs [j] .style.display = 'ไม่มี'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '#999';} // ให้ภาพดัชนีที่เลือกจะแสดงและวงกลมที่เกี่ยวข้องจะถูกเน้น imgs [i] .style.display = 'บล็อก'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // ฟังก์ชั่นการประมวลผลเหตุการณ์อัตโนมัติ autobofang () {if (pic_index> = lis.length) {pic_index = 0;} Change1 (pic_index); pic_index ++;} // เหตุการณ์ในการแปลงฟังก์ชั่นการเล่นอัตโนมัติ ULS [0] .AddeventListener ("MouseOver", หยุดชั่วคราว, เท็จ); // เมาส์เคลื่อนย้ายแท็ก UL, เล่นภาพโดยอัตโนมัติยังคงอยู่ [0] target = event.target || event.sreclement; switch (target.id) {กรณี "pic1": clearinterval (pic_time); BREAK; CASE "PIC2": ClearInterval (pic_time); break; case "pic3": clearinterval (pic_time); break;}} // auto play pictures pictures ฟังก์ชั่นการดำเนินการต่อ (เหตุการณ์) {var event = event || window.event; var target = event.target || เหตุการณ์; switch (target.id) {case "pic1": pic_index = 1; pic_time = setInterval (autobofang, 3000); break; case "pic2": pic_index = 2; pic_time = setInterval (autobofang, 3000); break; case "pic3": pic_index = 3; pic_time = setInterval (autobofang, 3000); break;}}}5. ภาพการทำซ้ำ:
6. ปัญหาและข้อบกพร่องที่พบ
ปัญหา: เมื่อเมาส์เคลื่อนเข้าสู่แท็ก UL เป็นครั้งแรกภาพม้าหมุนอัตโนมัติจะหยุดลงเมาส์จะเคลื่อนที่ออกมาและม้าหมุนอัตโนมัติยังคงดำเนินต่อไป
สาเหตุของปัญหา: เมื่อใช้ตัวจับเวลาอีกครั้งหลังจากหยุดม้าหมุนค่าจะไม่ถูกกำหนดให้กับ pic_time สำหรับการบันทึกดังนั้นเมาส์จะไม่ถูกย้ายไปที่แท็ก UL อีกครั้งเพื่อล้างตัวจับเวลา ดังนั้นการคลิกแท็ก UL อีกครั้งจึงไม่สามารถหยุดการเล่นม้าหมุนอัตโนมัติและความเร็วก็เร็วขึ้นและเร็วขึ้น
ความไม่เพียงพอ: ผลกระทบของการหมุนแบบไม่มีจริงเช่นแผนภูมิม้าหมุน Taobao ยังไม่ประสบความสำเร็จและเอฟเฟกต์ตัวบ่งชี้ของลูกศรซ้ายและขวายังไม่เสร็จสมบูรณ์ สิ่งเหล่านี้จะยังคงเรียนรู้ในระยะต่อมาปรับปรุงและแบ่งปัน