Paparan Slaid JavaScript dengan Fungsi

• Mungkin 2, 2024

Dalam artikel sebelumnya kami mencipta dan melakukan penalaan halus pada persembahan slaid JavaScript yang sangat mudah. Pertunjukan slaid ini berfungsi sepenuhnya, dan juga memaparkan sesuatu yang sesuai untuk orang-orang yang tidak mempunyai JavaScript, tetapi saya ingin mempunyai imej kecil pada gambar yang saya sedang memaparkan kelihatan berbeza daripada imej kecil yang lain. Saya telah menetap menggunakan id CSS yang dipanggil "semasa" yang membuat imej separa telus dan menambah sempadan merah nipis untuk imej kecil yang dipilih. Dalam artikel terakhir saya, saya mendapat tingkah laku ini untuk thumbnail yang dipilih pada mulanya tetapi apabila saya memilih lakaran kecil baru, lakaran kecil baru tidak berubah dan imej kecil awal menyimpan gaya yang dipilih.

Dalam versi persembahan slaid saya sebelum ini, apabila pengguna mengklik pada imej kecil, imej besar yang berkaitan dipaparkan. Apa yang saya mahu lakukan ialah mengubah imej yang besar, tetapkan lakaran imej yang dipilih sebelum ini untuk kembali normal dan buat paparan kecil ini dengan gaya khas untuk imej yang dipilih. Oleh kerana saya kini melakukan banyak perkara apabila gambar kecil diklik, saya beralih daripada meletakkan semua kod saya di atribut onClick img tag untuk menggunakan fungsi. Fungsi JavaScript biasanya masuk ke dalam kepala seksyen HTML supaya mereka akan dimuatkan dan siap apabila badan halaman dimuatkan. Mereka boleh sama ada dimasukkan secara langsung di antara skrip tag atau letak dan fail dan dimasukkan. Untuk program pendek, atau ketika saya sedang mengetik secara aktif, saya lebih mudah untuk meletakkan kod saya secara langsung di halaman seperti yang saya lakukan di sini.

Saya boleh menggunakan fungsi untuk setiap lakaran kecil tetapi kerana semua perubahan dari thumbnail ke lakaran kecil adalah nama imej dan id thumbnail (dan saya menggunakan nama imej untuk id), saya menulis satu fungsi yang mengambil id sebagai hujah dan menggunakannya untuk mencipta nama imej yang sesuai dengan menambah ".jpg" kepadanya. Saya panggil fungsi saya displayLarge.

paparan fungsiLarge (id) {
// menukar imej yang besar
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
/ // tetapkan gaya imej semula sebelumnya kembali kepada lalai
document.getElementById ("semasa"). id = oldID;
/ / ambil nota id sebelum kita mengubahnya
oldID = id
// tandakan imej kecil sebagai semasa dengan gaya semasa
document.getElementById (id) .id = "current";
}

Untuk fungsi ini berfungsi buat pertama kalinya, saya juga harus memberikan definisi awal untuk oldID, pemboleh ubah yang saya gunakan untuk mengingati id asli lakaran kecil yang saat ini dipilih. Semua kod ini masuk ke bahagian kepala halaman web, supaya ia dimuatkan sebelum beban halaman.

Akhirnya, saya menukar HTML untuk imej kecil untuk memanggil fungsi saya. HTML untuk tayangan slaid saya sekarang kelihatan seperti ini:











Anda boleh melihat contoh kerja kod ini di sini.

Arahan Video: Cara Membuat Slide Isi Presentasi PowerPoint yang Cantik Menawan (Mungkin 2024).