Peragaan Slide JavaScript Dengan Fungsi

• Mungkin 18, 2024

Pada artikel sebelumnya kami membuat dan melakukan beberapa penyesuaian pada tampilan slide JavaScript yang sangat sederhana. Peragaan slide ini sepenuhnya berfungsi, dan bahkan menampilkan sesuatu yang sesuai untuk orang yang tidak memiliki JavaScript, tetapi saya ingin memiliki thumbnail dari gambar yang saya tampilkan saat ini terlihat berbeda dari thumbnail lainnya. Saya telah memutuskan untuk menggunakan id CSS yang disebut "saat ini" yang membuat gambar semi-transparan dan menambahkan batas merah tipis untuk thumbnail yang dipilih. Dalam artikel terakhir saya, saya mendapatkan perilaku ini untuk thumbnail yang awalnya dipilih tetapi ketika saya memilih thumbnail baru, thumbnail baru tidak berubah dan thumbnail awal mempertahankan gaya yang dipilih.

Dalam versi slide show saya sebelumnya, ketika pengguna mengklik thumbnail, gambar besar yang terkait ditampilkan. Apa yang ingin saya lakukan adalah mengubah gambar besar, mengatur thumbnail dari gambar yang dipilih sebelumnya untuk kembali normal dan membuat tampilan thumbnail ini dengan gaya khusus untuk gambar yang dipilih. Karena saya sekarang melakukan banyak hal ketika thumbnail diklik, saya beralih dari meletakkan semua kode saya di atribut onClick dari img memberi tag untuk menggunakan fungsi. Fungsi JavaScript biasanya masuk dalam kepala bagian dari HTML sehingga mereka akan dimuat dan siap ketika tubuh halaman dimuat. Mereka dapat dimasukkan secara langsung antara naskah tag atau put dan file dan disertakan. Untuk program pendek, atau ketika saya sedang aktif coding, saya merasa lebih mudah untuk meletakkan kode saya langsung di halaman seperti yang saya lakukan di sini.

Saya bisa menggunakan fungsi untuk setiap thumbnail tetapi karena semua yang berubah dari thumbnail ke thumbnail adalah nama gambar dan id dari thumbnail (dan saya menggunakan nama gambar untuk id), saya menulis satu fungsi tunggal yang mengambil id sebagai argumen dan menggunakannya untuk membuat nama gambar yang sesuai dengan menambahkan ".jpg" ke sana. Saya memanggil fungsi saya displayLarge.

function displayLarge (id) {
// ubah gambar besar
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// atur gaya thumbnail sebelumnya kembali ke default
document.getElementById ("current"). id = oldID;
// catat id sebelum kita mengubahnya
oldID = id
// tandai gambar kecil sebagai gaya saat ini dengan gaya saat ini
document.getElementById (id) .id = "current";
}

Agar fungsi ini berfungsi pertama kali, saya juga harus memberikan definisi awal untuk oldID, variabel yang saya gunakan untuk mengingat id asli dari thumbnail yang saat ini dipilih. Semua kode ini masuk di bagian kepala halaman web, sehingga kode itu dimuat sebelum halaman dimuat.

Akhirnya, saya mengubah HTML untuk thumbnail untuk memanggil fungsi saya. HTML untuk tayangan slide saya sekarang terlihat seperti ini:











Anda dapat melihat contoh kode ini yang berfungsi di sini.