จากบทความก่อนหน้านี้โดยใช้ JS เพื่อใช้รหัสเอฟเฟกต์ภาพหมุน (I) เหตุการณ์การตอบสนองของลูกศรซ้ายและขวาจะถูกเพิ่มและคลิกที่ลูกศรซ้ายและขวาสามารถทำให้ภาพเลื่อน:
รหัส JS มีดังนี้:
window.onload = function () {// การเริ่มต้น Carousel var lunbo = document.getElementById ('เนื้อหา'); var imgs = lunbo.getElementsByTagname ('img'); var uls = lunbo.getElementSByTagname ('ul'); document.getElementById ('prev'); var item = 0; // ในสถานะเริ่มต้นวงกลมอยู่ในโหมดไฮไลต์ lis [0] .style.fontsize = '26px'; lis [0] .style.color = '#FFFF'; 1; // ม้าหมุนอัตโนมัติ ใช้ pic_time เพื่อบันทึกการเล่นและคุณสามารถใช้ ClearInterval () เพื่อล้างได้ตลอดเวลา var pic_time = setInterval (autobofang, 1000); // ฟังก์ชั่นการประมวลผลเหตุการณ์อัตโนมัติ autobofang () {ถ้า (pic_index> = lis.length) {pic_index = 0;} picchange (pic_index); pic_index ++;} // manual carousel สำหรับ (var i = 0; lis [i] .addeventListener ("mouseover", การเปลี่ยนแปลง, เท็จ);} การเปลี่ยนแปลงฟังก์ชั่น (เหตุการณ์) {var event = เหตุการณ์ || window.event; var target = event.target || event.srelement; 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'; } // เมื่อเมาส์เคลื่อนเข้าใกล้พื้นที่ภาพการเล่นอัตโนมัติหยุด lunbo.addeventListener ("Mouseover", function () {clearinterval (pic_time);}, false); // เมื่อเมาส์เคลื่อนออกจากพื้นที่ภาพ SetInterval (Autobofang, 1000); 2) {item = 0;} else {item+= 1;} picchange (item);} prev.addeventListener ("คลิก", moveprev, false); ฟังก์ชั่น moveprev () {ถ้า (รายการ == 0) {item = 2;แผนภาพการทำซ้ำ: แผนภาพการทำซ้ำของเมาส์ที่ผ่านลูกศร
เมื่อเมาส์คลิกที่ลูกศรรูปภาพจะเปลี่ยนไปและวงกลมเล็ก ๆ ด้านล่างจะแสดงเอฟเฟกต์การไฮไลต์ของภาพที่เกี่ยวข้อง
สรุป:
เอฟเฟกต์ม้าหมุนขั้นพื้นฐานได้รับการประสบความสำเร็จ สิ่งที่ต้องทำในภายหลังคือการทำให้ง่ายขึ้นและห่อหุ้มรหัสและปรับปรุงประสิทธิภาพการดำเนินงาน