Selanjutnya saya akan memulai bagian paling inti yaitu menulis program javascript. Ide kami adalah kami dapat menentukan sekelompok gambar (beberapa gambar). Ketika halaman muncul, gambar pertama akan ditampilkan pertama dan gambar kedua akan dimuat sebelumnya gambar juga dimuat, dan kami mulai secara otomatis beralih ke gambar kedua. Saat ini, gambar ketiga sudah dimuat. Jika kami memuat gambar ketiga dalam waktu 5 detik, kami akan secara otomatis beralih ke gambar ketiga, dan pemutaran dilanjutkan sampai yang terakhir dimulai dari awal lagi. Tentu saja, ini diputar secara otomatis. Kami juga mengizinkan pengguna untuk memutar maju dan mundur secara manual.
Pertama-tama, masalah yang harus kita selesaikan adalah preloading gambar, karena ini menentukan kelancaran proses peralihan dan kesempurnaan proses pemutaran. Sangat mudah untuk memuat gambar terlebih dahulu. Kita hanya perlu membuat variabel instan baru dari gambar tersebut di memori dan mengarahkan variabel tersebut ke gambar pramuat. Ditulis dalam javascript tampilannya seperti ini:
var myImage = new Image()
myImage.src = "someImage.gif"
Lalu, kita juga perlu mengetahui apakah gambar tersebut dimuat? Jika dimuat, kami akan menampilkannya. Jika tidak dimuat, akan terjadi kesalahan. Jadi kita harus mengubah kode di atas dan menambahkan dua pernyataan, sehingga JavaScript ini menjadi seperti berikut:
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
Kami menambahkan kejadian onload dan onerror pada gambar, yang masing-masing mewakili apakah akan melakukan preload dan preload error. Kedua kalimat ini harus berada di depan pernyataan img.src. Jika tidak, pramuat gambar akan salah.
Langkah terakhir adalah program peralihan gambar kami. Sebelumnya, kami meninjau berbagai efek filter konversi Filter di CSS. Di sini kami menggunakan efek acak dengan nama kode 23. Di bawah ini adalah apa yang kami tulis untuk efek ini dalam program JavaScript:
if (document. gambar.slideShow.filter)
{
dokumen.gambar.slideShow.filter[0].Stop()
dokumen.gambar.slideShow.filter[0].Terapkan()
// Gunakan efek transisi acak document.images.slideShow.filters.revealTrans.transition=23
}
dokumen.gambar.slideShow.src = sSumber
//Mulai mengeksekusi efek konversi
if (dokumen.gambar.slideShow.filters)
dokumen.gambar.slideShow.filter[0].Mainkan()