ตัวอย่างในบทความนี้แบ่งปันผลกระทบของ JS เพื่อให้ได้การสลับภาพสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ใช้ JS เพื่อรับรู้ถึงผลกระทบของการคลิกปุ่มและเปลี่ยนรูปภาพ:
<div id = "box"> <div id = "img_box"> <img src = "../ raw/b1.jpg"> <img src = "../ raw/b2.jpg"> <img src = "../ raw/b3.jpg"> <img src = " id = "ขวา"> </div> </div>
โครงสร้าง: ใช้ความกว้างและความสูงคงที่เพื่อสร้างภาชนะด้านนอกสุดตั้งค่าล้นให้ซ่อน
จากนั้นเลเยอร์ด้านใน img_box ตั้งค่าความกว้างเป็นสี่เท่าของความกว้างของกล่องและความสูงเท่ากัน กล่าวคือ IMG_BOX มี IMG สี่ตัว แต่มีเพียงหนึ่งเดียวเท่านั้นที่มองเห็นได้คือ ทั้งสอง divs ซ้ายและขวาด้านล่างทำหน้าที่เป็นปุ่มเพื่อให้ได้คลิกเพื่อสลับรูปภาพ การสลับรูปภาพหมายถึงการเปลี่ยนแอตทริบิวต์ด้านซ้ายของ img_box ดังนั้น img_box ควรตั้งตำแหน่งเป็นสัมบูรณ์ เพื่อความสะดวกตำแหน่งของกล่องถูกตั้งค่าเป็นความสัมพันธ์ดังนั้น img_box จึงอยู่ในตำแหน่งที่สัมพันธ์กับกล่อง สี่ภาพตั้งค่าลอยไปทางซ้ายโดยมีความกว้างและความสูงเท่ากันกับกล่อง
รหัส CSS:
*{มาร์จิ้น: 0; Padding: 0;}. Box {Width: 800px; ความสูง: 400px; มาร์จิ้น: 20px auto; ตำแหน่ง: ญาติ; ล้น: ซ่อน;}. img_box {ความสูง: 400px; ความกว้าง: 3200px; ตำแหน่ง: สัมบูรณ์; -MOZ-TRANSITION: 0.5S; -webkit-transition: 0.5s;} img {width: 800px; ความสูง: 400px; ลอย: ซ้าย;}. สวิตช์ {Width: 200px; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์;}#ซ้าย {ซ้าย: 0px; ด้านบน: 0px; ความเป็นมา: -Moz-Linear-Gradient (ซ้าย, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0)); ความเป็นมา: -webkit-Linear-Gradient (ซ้าย, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));}#ขวา {ขวา: 0px; ด้านบน: 0px; ความเป็นมา: -Moz-Linear-Gradient (ซ้าย, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0.5)); ความเป็นมา: -webkit-linear-gradient (ซ้าย, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0.5));}#ซ้าย: Hover {พื้นหลัง: -Moz-linear-gradient RGBA (20%, 20%, 20%, 0));}#ขวา: โฮเวอร์ {พื้นหลัง: -moz-linear-gradient (ซ้าย, rgba (0, 0, 0,0.5), rgba (20%, 20%, 20%, 0)); RGBA (0, 0, 0,0.5)); ความเป็นมา: -webkit-Linear-Gradient (ซ้าย, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0.5));}ซ้ายและขวาใช้คุณสมบัติการไล่ระดับสีพื้นหลังและความโปร่งใสมีการเพิ่มเบราว์เซอร์ Firefox และเบราว์เซอร์ WebKit เท่านั้น นอกจากนี้เบราว์เซอร์ IE บางตัวคือ IE และ WebKit Dual Cores เช่น 360 Secure Browser
ความเป็นมา: -Moz-Linear-Gradient (ซ้าย, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));
ความเป็นมา: -webkit-Linear-Gradient (ซ้าย, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));
เพื่อให้เกิดการเปลี่ยนแปลงอย่างราบรื่นในระหว่างการสลับคุณสมบัติการเปลี่ยนแปลงจะถูกเพิ่ม:
-MOZ-TRANSITION: 0.5S;
-webkit-transition: 0.5s;
รหัส JS:
กล่อง var; var count = 1; window.onload = function () {box = document.getElementById ("img_box"); var left = document.getElementById ("ซ้าย"); var right = document.getElementById ("ขวา"); left.addeventListener ("คลิก", _ ซ้าย); Right.addeventListener ("คลิก", _ ขวา); document.body.addeventListener ("mouseover", การสาธิต);} ฟังก์ชั่น _right () {var dis = 0; if (นับ <4) {dis = count*800; } else {dis = 0; นับ = 0; } box.style.left = "-"+dis+"px"; นับ+= 1;} ฟังก์ชัน _left (เหตุการณ์) {var dis = 0; if (count> 1) {dis = (2-count)*800; } else {dis = -3*800; นับ = 5; } box.style.left = dis+"px"; นับ-= 1;}ใช้จำนวนตัวแปรส่วนกลางเพื่อบันทึกภาพที่แสดงในปัจจุบัน เมื่อคลิกปุ่มสลับให้คำนวณภาพที่ควรแสดงตามการนับจากนั้นคำนวณและตั้งค่าแอตทริบิวต์ด้านซ้ายของ IMG_BOX
ด้านบนเป็นรหัสสำหรับการใช้เอฟเฟกต์การสลับภาพโดย JS แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะช่วยให้คุณบรรลุเอฟเฟกต์การสลับภาพ