JavaScript Slide Show พร้อม CSS

• เมษายน 29, 2024

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

ก่อนอื่นฉันแปลงสไตล์ที่มีอยู่เพื่อใช้ CSS หากคุณไม่คุ้นเคยกับ CSS วิธีที่ง่ายที่สุดในการเริ่มต้นการทดสอบคือใส่ไว้ระหว่างกัน สไตล์ แท็กในส่วนหัวของเอกสาร HTML ของคุณ แท็กเริ่มต้นจำเป็นต้องมีแอตทริบิวต์ type เพื่อบอกเบราว์เซอร์ว่าคุณใช้ข้อมูลสไตล์ประเภทใดดังนั้นควรมีลักษณะดังนี้:



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

#largeImage {
เส้นขอบ: 2px สีดำทึบ
ความกว้าง: 544px;
ความสูง: 408px;
}

ก่อนหน้านี้ฉันไม่ได้รวมข้อมูลการปรับขนาดสำหรับรูปขนาดย่อ แต่ฉันเพิ่มคลาสที่เรียกว่า นิ้วหัวแม่มือ และตั้งค่าแท็กรูปภาพในคลาสนั้นเพื่อตั้งขนาดเป็น 40px คูณ 40px ซึ่งหมายความว่าแม้ว่าฉันจะโหลดภาพที่มีขนาดใหญ่หรือเล็กเกินไปสำหรับภาพขนาดย่อโดยไม่ตั้งใจพวกเขาจะถูกบังคับให้แสดงผลในขนาดภาพย่อ

img.thumbs {
เส้นขอบ: ไม่มี;
ความกว้าง: 40px;
ความสูง: 40px;
}

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

.slideshow {
ความสูง: 408px;
ความสูงสูงสุด: 408px;
}

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

img # {ปัจจุบัน
เส้นขอบ: สีแดงทึบ 1px;
กรอง: อัลฟา (ทึบ = 50);
-moz-ทึบ: 0.5;
ความทึบแสง: 0.5;
}

ที่นี่เราเห็นโค้ดบางอย่างเพื่อจัดการกับความแตกต่างของเบราว์เซอร์อีกครั้งการเรียกมาตรฐานสำหรับการใช้องค์ประกอบความทึบ แต่เบราว์เซอร์ที่ใช้ IE และ Mozilla ยังไม่รองรับ

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









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

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

คำแนะนำวิดีโอ: jQuery Slide part2 พร้อม code, banner website (เมษายน 2024).