Papar Slaid JavaScript dengan CSS

• April 30, 2024

Dalam artikel sebelumnya kami membuat persembahan slaid JavaScript yang sangat mudah. Pertunjukan slaid ini berfungsi sepenuhnya, dan juga memaparkan sesuatu yang sesuai untuk orang yang tidak mempunyai JavaScript, tetapi ia tidak mempunyai semua ciri yang saya ingin mempunyai untuk laman web saya. Khususnya, saya ingin mempunyai lakaran imej yang saya buat pada masa ini kelihatan berbeza daripada imej kecil yang lain. Oleh kerana gaya adalah cara yang baik untuk mencapai ini, saya akan memulakan dengan menukar semua sifat dalam HTML sedia ada saya kepada CSS.

Pertama saya menukar gaya saya yang sedia ada untuk menggunakan CSS. Jika anda tidak biasa dengan CSS, cara yang paling mudah untuk mula bereksperimen dengannya adalah untuk meletakkannya di antara gaya tanda di kepala dokumen HTML anda. Tag awal memerlukan atribut jenis untuk memberitahu pelayar apa jenis maklumat gaya yang anda gunakan, supaya ia kelihatan seperti ini:



Penukaran awal ke CSS adalah mudah kerana imej yang besar hanya mempunyai maklumat gaya dan sudah ada ID atribut yang sedang digunakan untuk tujuan JavaScript.

#largeImage {
sempadan: 2px pepejal hitam;
lebar: 544px;
ketinggian: 408px;
}

Saya tidak pernah memasukkan maklumat saiz sebelum ini untuk imej kecil, tetapi saya menambah kelas yang dipanggil ibu jari dan tetapkan tag imej dalam kelas itu untuk menetapkan saiz hingga 40px dengan 40px. Ini bermakna walaupun saya secara tidak sengaja memuat imej yang terlalu besar atau kecil untuk imej kecil, mereka akan dipaksa untuk memaparkan saiz imej kecil.

img.thumbs {
sempadan: tiada;
lebar: 40px;
ketinggian: 40px;
}

Saya juga menambah a tayangan slaid kelas untuk memegang keseluruhan tayangan slaid. Ini akan membolehkan saya melakukan perkara seperti menambah sempadan atau menukar warna latar belakang untuk keseluruhan tayangan slaid jika saya inginkan. Pada ketika ini saya hanya menggunakannya untuk menetapkan ketinggian maksimum ke ketinggian imej yang besar, kerana apabila saya menambah lebih banyak imej kecil, saya mahu mereka tinggal di sisi imej besar dan bukan bergerak di atasnya. Malangnya, Internet Explorer tidak menyokong atribut ketinggian maksima, jadi saya masih perlu bekerja pada isu ini lebih lama kemudian.

.slideshow {
ketinggian: 408px;
ketinggian maksimum: 408px;
}

Akhirnya saya mencipta gaya untuk imej kecil yang dipilih. Saya memutuskan bahawa saya mahu imej kecil saya dipilih menjadi separa telus dan mempunyai sempadan merah sempit. Oleh kerana hanya satu imej akan dipilih pada satu masa saya memutuskan untuk menggunakan id yang dipanggil "semasa" untuk tujuan ini. Kelebihan menggunakan CSS ialah saya boleh mengubah cara ia akan melihat pada bila-bila masa tanpa mengubah kod. Gaya kelihatan seperti ini:

img # current {
sempadan: 1px pepejal merah;
penapis: alpha (opacity = 50);
-moz-opacity: 0.5;
kelegapan: 0.5;
}

Di sini kita melihat beberapa kod untuk mengendalikan perbezaan pelayar sekali lagi, panggilan standard untuk menggunakan elemen kelipan, tetapi pelayar berasaskan IE dan Mozilla tidak menyokongnya.

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









Kami tidak mengubah JavaScript kami, jadi persembahan slaid masih berfungsi, tetapi kini kami mempunyai lebih banyak gaya dan persembahan kami dipisahkan dari HTML dan JavaScript kami. Walau bagaimanapun, kami mempunyai satu masalah, sementara thumbnail yang dipilih awalnya separa telus dengan sempadan merah, ia tetap seperti itu apabila kami menukar imej. Untuk membetulkannya, kami perlu kembali ke JavaScript sahabat lama kami.

Anda boleh melihat contoh kerja kod di sini di sini.

Arahan Video: MAKING TOUCH RESPONSIVE IMAGES-SLIDER using Vanilla JavaScript | Full Ngoding Tutorial + Subtitle (April 2024).