Peragaan Slide JavaScript dengan CSS

• April 28, 2024

Dalam artikel sebelumnya, kami membuat tayangan slide JavaScript yang sangat sederhana. Peragaan slide ini berfungsi sepenuhnya, dan bahkan menampilkan sesuatu yang sesuai untuk orang yang tidak memiliki JavaScript, tetapi tidak memiliki semua fitur yang ingin saya miliki untuk situs web saya. Secara khusus, saya ingin memiliki gambar mini dari gambar yang saya tampilkan saat ini terlihat berbeda dari gambar mini lainnya. Karena gaya adalah cara yang baik untuk mencapai hal ini, saya akan mulai dengan mengubah semua atribut dalam HTML saya yang ada ke CSS.

Pertama saya mengonversi gaya saya yang ada untuk menggunakan CSS. Jika Anda tidak terbiasa dengan CSS, cara termudah untuk mulai bereksperimen dengannya adalah dengan membuatnya gaya tag di kepala dokumen HTML Anda. Tag awal memerlukan atribut tipe untuk memberi tahu peramban jenis informasi gaya apa yang Anda gunakan, sehingga akan terlihat seperti ini:



Konversi awal ke CSS mudah karena hanya gambar besar yang memiliki informasi gaya dan sudah ada Indo atribut yang sedang digunakan untuk keperluan JavaScript.

#largeImage {
perbatasan: 2px hitam pekat;
lebar: 544px;
tinggi: 408px;
}

Saya sebelumnya tidak memasukkan informasi ukuran untuk thumbnail, tetapi saya menambahkan kelas yang disebut jempol dan atur tag gambar di kelas itu untuk mengatur ukuran menjadi 40px kali 40px. Ini berarti bahwa walaupun saya secara tidak sengaja memuat gambar yang terlalu besar atau kecil untuk gambar mini, gambar tersebut akan dipaksa untuk ditampilkan dalam ukuran gambar kecil.

img.thumbs {
perbatasan: tidak ada;
lebar: 40px;
tinggi: 40px;
}

Saya juga menambahkan rangkai salindia kelas untuk menahan seluruh tampilan slide. Ini akan memungkinkan saya untuk melakukan hal-hal seperti menambah perbatasan atau mengubah warna latar belakang untuk seluruh rangkai salindia jika saya mau. Pada titik ini saya hanya menggunakannya untuk mengatur ketinggian maksimum ke ketinggian gambar besar, karena ketika saya menambahkan lebih banyak gambar kecil saya ingin mereka tetap di sisi gambar besar daripada bergerak di atasnya. Sayangnya, Internet Explorer tidak mendukung atribut max-height, jadi saya masih harus bekerja pada masalah ini nanti.

.slonton {
tinggi: 408px;
max-height: 408px;
}

Akhirnya saya membuat style untuk thumbnail yang dipilih. Saya memutuskan bahwa saya ingin thumbnail yang saya pilih semi-transparan dan memiliki batas merah yang sempit. Karena hanya satu gambar yang akan dipilih pada satu waktu saya memutuskan untuk menggunakan id yang disebut "saat ini" untuk tujuan ini. Keuntungan menggunakan CSS adalah bahwa saya dapat mengubah tampilannya setiap saat tanpa mengubah kode. Gaya terlihat seperti ini:

img # current {
perbatasan: 1px merah solid;
filter: alpha (opacity = 50);
-moz-opacity: 0,5;
opacity: 0,5;
}

Di sini kita melihat beberapa kode untuk menangani perbedaan browser lagi, panggilan standar untuk menggunakan elemen opacity, tetapi browser berbasis IE dan Mozilla belum mendukungnya.

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









Kami belum mengubah JavaScript kami, jadi tayangan slide masih berfungsi, tetapi sekarang kami memiliki lebih banyak gaya dan presentasi kami terpisah dari HTML dan JavaScript kami. Namun, kami memiliki satu masalah, sedangkan thumbnail yang awalnya dipilih semi-transparan dengan batas merah, tetap seperti itu ketika kami mengubah gambar. Untuk memperbaiki ini, kita perlu kembali ke JavaScript teman lama kita.

Anda dapat melihat contoh kode yang berfungsi sejauh ini di sini.

Petunjuk Video: Demo Aplikasi Media Pembelajaran Untuk SD Kelas 3 (April 2024).