ฉันได้แชร์อัลกอริทึมกราฟ Carousel ที่เปลี่ยนแปลงลำดับชั้นมาก่อน วันนี้ฉันยังคงใช้ความโปร่งใสต่อไปเพื่อให้ได้อัลกอริทึมกราฟแบบหมุนที่ไม่มีการกำจัด
ตรรกะการใช้งาน: วางตำแหน่งรูปภาพทั้งหมดที่จะหมุนเข้าด้วยกันนั่นคือซ้อนกันขึ้นเลเยอร์โดยเลเยอร์และใช้แอตทริบิวต์ลำดับชั้นเพื่อปรับลำดับภาพที่ถูกต้องตั้งค่าความโปร่งใสของรูปภาพเป็น 0 จากนั้นสร้างความโปร่งใสของภาพแรกเริ่มต้นเป็น 1
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> เปลี่ยนอัลกอริทึมความโปร่งใส (คลาสสิก) </title> <style media = "หน้าจอ"> * {margin: 0; Padding: 0; } .wrap {width: 60%; มาร์จิ้น: อัตโนมัติ; ตำแหน่ง: ญาติ; } .wrap img {width: 100%; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; การเปลี่ยนแปลง: 2S; } .wrap img: nth-child (1) {ตำแหน่ง: ญาติ; } .wrap .follow {width: 150px; ความสูง: 30px; มาร์จิ้น: อัตโนมัติ; จอแสดงผล: Flex; Justify-Content: Space-Between; } .wrap .Follow Span {Width: 10px; ความสูง: 10px; แนวชายแดน: 50%; ชายแดน: 3PX Solid Grey; } .wrap .follow Span: Hover {Cursor: Pointer; } </style> </head> <body> <div> <img src = "img/01.jpg"/> <img src = "img/02.jpg"/> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> value = "◀︎"> <อินพุต id = "Rightbut" type = "ปุ่ม" ชื่อ = "name" value = "▶"> <div> <pan> </span> <span> </span> <span> </span> <span> </span> Document.QuerySelectorall ('. wrap img'); var Spans = document.querySelectorAll ('. ติดตาม Span'); var leftbut = document.getElementById ('leftbut'); var rightbut = document.getElementById ('Rightbut'); // กำหนดฟังก์ชันพารามิเตอร์ showimage (ดัชนี) {สำหรับ (var i = 0; i <images.length; i ++) {Spans [i] .index = i; // แอตทริบิวต์ที่กำหนดเองรับภาพตัวห้อยที่สอดคล้องกัน [i] .index = i; // แอตทริบิวต์ที่กำหนดเอง '0'; // กำหนดความโปร่งใสของภาพทั้งหมดให้กับ 0 Spans [i] .style.background = 'grey'; // จุดปักกิ่งทั้งหมดถูกตั้งค่าเป็นสีดำ} // กำหนดความโปร่งใสของภาพของค่าพารามิเตอร์ที่เข้ามาเป็น 1 ภาพ [ดัชนี] // กำหนดสีพื้นหลังของรูปภาพด้วยค่าพารามิเตอร์ตัวพารามิเตอร์ที่เข้ามาให้กับช่วงสีขาว [ดัชนี] .style.background = 'White'; } showImage (0); // เริ่มต้นรูปแบบของรูปภาพด้วยค่าพารามิเตอร์ที่เข้ามาเป็น 0 var count = 1; // รับ counter // กำหนดฟังก์ชันม้าหมุนอัตโนมัติ imageMove () {// ถ้าค่านับสามารถหารได้ 4 ถ้า (นับ % 4 == 0) {count = 0; } // ส่งค่านับเป็นพารามิเตอร์ไปยังฟังก์ชัน showimage (); showimage (นับ); นับ ++; // ดำเนินการครั้งเดียว +1} // ตั้งค่าฟังก์ชั่น imageMove () เพื่อเรียกทุก ๆ สองวินาทีและกำหนดให้กับ ImageInitialMove var imageInitialMove = setInterval ('ImageMove ()', 2000); // คลิกซ้ายไปที่เหตุการณ์ leftbut.onclick = function () {// ล้างตัวจับเวลา ClearInterval (ImageInitialMove); // เนื่องจากทิศทางตรงข้ามกับล้ออัตโนมัติจำเป็นต้องตัดสินว่าค่าของการนับเป็น 0 กำหนดใหม่เป็น 4 และดำเนินการต่อเพื่อวนรอบถ้า (count == 0) {count = 4; } count-; showImage (count); // การเรียกจำนวนฟังก์ชั่นแรกจาก -imageInitialMove = setInterval ('imageMove ()', 2000); } // The Right-to-Rightbut.onclick = function () {ClearInterval (ImageInitialMove); ImageMove (); // เนื่องจากทิศทางเหมือนกับม้าหมุนอัตโนมัติโทรโดยตรง // กำหนดตัวจับเวลา imageInitialMove = setInterval ('imageMove ()', 2000); } // คลิกเหตุการณ์สำหรับจุดสำหรับ (var i = 0; i <spans.length; i ++) {Spans [i] .onclick = function () {clearInterval (imageInitialMove); // กำหนดค่าตัวห้อยของ DOT ที่คลิกในปัจจุบันเป็น count = event.target.index; // เรียกฟังก์ชั่น showimage (นับ); ImageInitialMove = setInterval ('imageMove ()', 2000); }} </script> </html>การแบ่งปันหัวข้อที่ยอดเยี่ยม: ภาพ jQuery Carousel JavaScript รูปภาพ Carousel Bootstrap Picture Carousel
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น