โปรแกรมสไลด์โชว์ DHTML (1)

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-20 17:00:35

นี่คือโปรแกรมสไลด์โชว์ซึ่งเป็นโปรแกรมที่เล่นภาพตามลำดับ เราจะเห็นแถบเล่นโฆษณารูปแบบนี้ในบางไซต์ซึ่งส่วนใหญ่สร้างด้วย CGI ซึ่งหมายความว่าเซิร์ฟเวอร์จะต้องรองรับโปรแกรม CGI เช่น ASP, PHP, Perl เป็นต้น แต่วิธีการนำไปใช้ของเราที่นี่ไม่จำเป็นต้องใช้ CGI เพียงใช้เอฟเฟกต์ CSS เท่านั้น รวมถึงการควบคุม JavaScripts ตราบใดที่เบราว์เซอร์ของคุณเป็น IE 4.0 ขึ้นไป หรือ Netscape 3.0 ขึ้นไป เพียงแต่ที่นี่เราใช้เอฟเฟกต์ตัวกรอง CSS ซึ่งสามารถปรากฏใน IE เท่านั้น สำหรับข้อมูลเกี่ยวกับเอฟเฟกต์ตัวกรองของ CSS คุณสามารถดู "คำอธิบายโดยละเอียดของตัวกรองใน CSS" ของฉันซึ่งเผยแพร่บน Yesky.com
เอาล่ะ มาเตรียมตัวกันหน่อย

ก่อนอื่น เพื่อสร้างเอฟเฟ็กต์นี้ อันดับแรกเราต้องสร้างรูปภาพที่มีขนาดเท่ากันหลายภาพแล้วปล่อยให้เล่นตามลำดับ ตัวอย่างเช่น ฉันพบรูปภาพขนาด 88x31 สามรูปภาพต่อไปนี้เป็นรูปภาพที่ใช้

ประการที่สอง ให้เราทบทวนความรู้เกี่ยวกับตัวกรองการแปลงรูปภาพของตัวกรองใน CSS:

แสดงตัวกรองการแปลงใน CSS

ตัวกรองการแปลงการแสดงผลให้เอฟเฟกต์การแปลงที่หลากหลายมากขึ้น ซึ่งแตกต่างจากตัวกรองการแปลงแบบไฮบริดซึ่งให้เอฟเฟกต์การเฟดเข้าและออกเท่านั้น แต่ยังให้เอฟเฟกต์การแปลงรูปภาพเพิ่มเติมอีกด้วย

ตัวกรอง: RevealTrans (ระยะเวลา = จำนวนวินาทีในการแปลง การเปลี่ยนแปลง = ประเภทการแปลง)

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

รหัสที่สอดคล้องกับ	รูปแบบการแปลงของตัวกรองการแปลง	แสดง	ที่สอดคล้องกับ
สี่เหลี่ยมผืนผ้าจากใหญ่ไปเล็ก	0	สุ่มละลาย	12
สี่เหลี่ยมจากเล็กไป	ใหญ่ 1	แยกในแนวตั้งเข้าด้านใน	13
วงกลมจากใหญ่ไปเล็ก	2	แนวตั้ง แยกออกด้านนอก	14
รอบ เล็กไปใหญ่	3	แยกตามแนวนอน เข้าด้านใน	15
ดันขึ้น	4	แยกออกในแนวนอน	16
กดลง	5	ลอกไปทางซ้ายและขวา	17
ดันขวา	6	ลอกขึ้นทางซ้าย	18
กดซ้าย เปิด	7	ลอกลงไปทางขวา	19
มู่ลี่แนวตั้ง	8	ลอก ขึ้นและขวา	20
มู่ลี่แนวนอน	9	เส้นสุ่มแนวนอน	21
หมากรุกแนวนอน	10	สุ่มเส้นแนวตั้ง	22
หมากรุกแนวตั้ง	11	สุ่มเลือกเอฟเฟกต์พิเศษ	23