ต่อไป ฉันจะเริ่มส่วนหลักที่สุด ซึ่งก็คือการเขียนโปรแกรมจาวาสคริปต์ แนวคิดของเราคือเราสามารถกำหนดกลุ่มรูปภาพได้ (หลายภาพ) เมื่อหน้าปรากฏขึ้น รูปภาพแรกจะถูกแสดงก่อน และรูปภาพที่สองจะถูกโหลดไว้ล่วงหน้า 5 วินาทีหลังจากรูปภาพแรกถูกโหลด โหลดรูปภาพแล้ว และเราเริ่มสลับไปที่รูปภาพที่สองโดยอัตโนมัติ ในเวลานี้ รูปภาพที่สามจะถูกโหลดไว้ล่วงหน้า ถ้าเราโหลดรูปภาพที่สามภายใน 5 วินาที เราจะสลับไปที่รูปภาพที่สามโดยอัตโนมัติ และการเล่นจะดำเนินต่อไป จนกระทั่งคนสุดท้ายเริ่มต้นใหม่อีกครั้ง แน่นอนว่าสิ่งนี้จะเล่นโดยอัตโนมัติ เรายังอนุญาตให้ผู้ใช้เล่นไปข้างหน้าและข้างหลังด้วยตนเอง
ก่อนอื่น ปัญหาที่เราต้องแก้ไขคือการโหลดรูปภาพล่วงหน้า เนื่องจากจะเป็นตัวกำหนดความราบรื่นของกระบวนการสลับและความสมบูรณ์แบบของกระบวนการเล่น มันง่ายมากที่จะโหลดรูปภาพล่วงหน้า เราเพียงสร้างตัวแปรอินสแตนซ์ใหม่ของรูปภาพในหน่วยความจำและชี้ตัวแปรไปที่รูปภาพ ด้วยวิธีนี้ เบราว์เซอร์ของเราจะโหลดรูปภาพของ กำลังโหลดล่วงหน้า เขียนด้วยจาวาสคริปต์ดูเหมือนว่านี้:
var myImage = new Image()
myImage.src = "someImage.gif"
แล้วเราก็ต้องรู้ด้วยว่าโหลดรูปภาพแล้วหรือยัง? หากโหลดแล้วเราจะแสดง หากไม่โหลด จะเกิดข้อผิดพลาด ดังนั้นเราจึงต้องเปลี่ยนโค้ดด้านบนและเพิ่มสองคำสั่ง ดังนั้น JavaScript นี้จึงกลายเป็นดังนี้:
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
เราได้เพิ่มเหตุการณ์ onload และ onerror ของรูปภาพ ซึ่งแสดงว่าจะโหลดล่วงหน้าและโหลดเหตุการณ์ข้อผิดพลาดตามลำดับหรือไม่ สองประโยคนี้ต้องอยู่หน้าคำสั่ง img.src มิฉะนั้น การโหลดรูปภาพล่วงหน้าจะผิดพลาด
ขั้นตอนสุดท้ายคือโปรแกรมเปลี่ยนรูปภาพของเรา ก่อนหน้านี้ เราได้ตรวจสอบเอฟเฟกต์ต่างๆ ของตัวกรองการแปลงใน CSS ที่นี่เราใช้เอฟเฟกต์แบบสุ่มที่มีชื่อรหัสว่า 23 ด้านล่างนี้คือสิ่งที่เราเขียนสำหรับเอฟเฟกต์นี้ในโปรแกรม
JavaScript image.slideShow.filters)
-
document.images.slideShow.filters[0].หยุด()
document.images.slideShow.filters[0].นำไปใช้()
// ใช้เอฟเฟกต์การเปลี่ยนแปลงแบบสุ่ม document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
//เริ่มดำเนินการเอฟเฟกต์การแปลง
ถ้า (document.images.slideShow.filters)
document.images.slideShow.filters[0].เล่น()