การแสดงภาพสไลด์ JavaScript พร้อมฟังก์ชั่น

• เมษายน 25, 2024

ในบทความก่อนหน้านี้เราได้สร้างและทำการปรับจูนด้วยสไลด์โชว์ JavaScript อย่างง่าย สไลด์โชว์นี้ใช้งานได้อย่างสมบูรณ์และแสดงสิ่งที่เหมาะสมสำหรับผู้ที่ไม่มี JavaScript แต่ฉันต้องการให้ภาพขนาดย่อของภาพที่ฉันกำลังแสดงอยู่นั้นดูแตกต่างจากภาพขนาดย่ออื่น ๆ ฉันตัดสินใจใช้รหัส CSS ที่เรียกว่า "ปัจจุบัน" ซึ่งทำให้รูปภาพแบบกึ่งโปร่งใสและเพิ่มเส้นขอบสีแดงบาง ๆ สำหรับภาพขนาดย่อที่เลือก ในบทความสุดท้ายของฉันฉันจะได้รับพฤติกรรมนี้สำหรับภาพขนาดย่อที่เลือกเริ่มต้น แต่เมื่อฉันเลือกรูปขนาดย่อใหม่รูปขนาดย่อใหม่ไม่เปลี่ยนแปลงและรูปขนาดย่อเริ่มต้นเก็บสไตล์ที่เลือกไว้

ในการนำเสนอภาพนิ่งรุ่นก่อนหน้าของฉันเมื่อผู้ใช้คลิกที่ภาพขนาดย่อรูปภาพขนาดใหญ่ที่เกี่ยวข้องจะปรากฏขึ้น สิ่งที่ฉันต้องการจะทำคือเปลี่ยนภาพขนาดใหญ่ตั้งค่ารูปขนาดย่อของรูปภาพที่เลือกไว้ก่อนหน้าเพื่อกลับไปเป็นปกติและทำให้รูปขนาดย่อนี้แสดงด้วยสไตล์พิเศษสำหรับรูปภาพที่เลือก เนื่องจากตอนนี้ฉันกำลังทำหลายสิ่งหลายอย่างเมื่อมีการคลิกรูปขนาดย่อฉันจึงเปลี่ยนจากการวางรหัสทั้งหมดของฉันในแอตทริบิวต์ onClick ของ img แท็กเพื่อใช้ฟังก์ชั่น ฟังก์ชั่นจาวาสคริปต์มักจะไปใน ศีรษะ ส่วนของ HTML เพื่อให้สามารถโหลดและพร้อมเมื่อโหลดเนื้อหาของหน้า พวกเขาสามารถแทรกโดยตรงระหว่าง ต้นฉบับ แท็กหรือวางและไฟล์และรวม สำหรับโปรแกรมสั้น ๆ หรือเมื่อฉันกำลังเขียนโปรแกรมฉันพบว่ามันง่ายกว่าที่จะใส่รหัสของฉันลงในหน้าเว็บอย่างที่ฉันทำที่นี่

ฉันสามารถใช้ฟังก์ชั่นสำหรับภาพย่อแต่ละภาพ แต่เนื่องจากการเปลี่ยนแปลงทั้งหมดจากภาพย่อเป็นภาพย่อเป็นชื่อของภาพและ ID ของภาพขนาดย่อ (และฉันใช้ชื่อภาพเป็นรหัส) ฉันจึงเขียนฟังก์ชั่นเดียวที่ถ่ายภาพ id เป็นอาร์กิวเมนต์และใช้เพื่อสร้างชื่อรูปภาพที่เหมาะสมโดยเพิ่ม ".jpg" ลงในมัน ฉันเรียกว่าฟังก์ชั่นของฉัน displayLarge.

ฟังก์ชั่น displayLarge (id) {
// เปลี่ยนภาพขนาดใหญ่
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imagename.
// กำหนดสไตล์ของภาพขนาดย่อก่อนหน้ากลับเป็นค่าเริ่มต้น
. document.getElementById ( "ปัจจุบัน") id = oldID;
// จดบันทึก id ก่อนที่เราจะเปลี่ยน
oldID id =
// ทำเครื่องหมายภาพย่อที่เป็นปัจจุบันด้วยสไตล์ปัจจุบัน
document.getElementById (ID) .id = "ปัจจุบัน";
}

เพื่อให้ฟังก์ชั่นนี้ทำงานเป็นครั้งแรกฉันต้องให้คำจำกัดความเบื้องต้นด้วย oldIDตัวแปรที่ฉันใช้เพื่อจดจำ ID ดั้งเดิมของภาพขนาดย่อที่เลือกไว้ในปัจจุบัน รหัสทั้งหมดนี้ไปในส่วนหัวของหน้าเว็บเพื่อให้มันโหลดก่อนที่จะโหลดหน้าเว็บ

ในที่สุดฉันเปลี่ยน HTML สำหรับรูปขนาดย่อเพื่อเรียกใช้ฟังก์ชันของฉัน ตอนนี้ HTML สำหรับสไลด์โชว์ของฉันมีลักษณะดังนี้:











คุณสามารถดูตัวอย่างการทำงานของรหัสนี้ได้ที่นี่