Cara Membuat SlideShow JavaScript dalam 3 Langkah Mudah

Sekiranya anda telah membaca panduan kami di cara membuat laman web , anda mungkin tertanya-tanya apa yang perlu dilakukan seterusnya untuk meningkatkan kemahiran anda. Membuat tayangan slaid foto adalah tugas yang sangat mengejutkan, dan yang dapat mengajar anda kemahiran berharga yang diperlukan untuk mendapatkan pekerjaan pengaturcaraan.

Hari ini saya akan menunjukkan cara membina tayangan slaid JavaScript dari awal. Mari melompat masuk!

Prasyarat

Anda mesti mengetahui beberapa perkara sebelum anda dapat memulakan pengekodan. Bersama penyemak imbas web dan penyunting teks pilihan anda (saya cadangkan Teks Luhur ), anda memerlukan sedikit pengalaman dengan HTML , CSS , JavaScript , dan jQuery .

Sekiranya anda tidak begitu yakin dengan kemahiran anda, pastikan anda membaca panduan kami untuk menggunakan Model Objek Dokumen dan petua ini untuk mempelajari CSS. Sekiranya anda yakin dengan JavaScript tetapi tidak pernah menggunakan jQuery sebelumnya, maka periksa panduan asas kami untuk jQuery.

1. Bermula

Tayangan slaid ini memerlukan beberapa ciri:

Sokongan untuk gambar
Kawalan untuk menukar gambar
Kapsyen teks
Mod automatik

Nampaknya senarai ciri ringkas. Mod automatik secara automatik akan memajukan gambar ke gambar seterusnya mengikut urutan. Inilah lakaran kasar yang saya buat sebelum menulis sebarang kod:

Sekiranya anda tertanya-tanya mengapa perlu bersusah payah, maka perhatikan kesilapan pengaturcaraan terburuk dalam sejarah ini. Projek ini tidak akan membunuh siapa pun, tetapi sangat penting untuk mempunyai pemahaman yang kuat mengenai kod dan prosedur perancangan sebelum mengerjakan kod yang lebih besar - walaupun hanya lakaran kasar.

Inilah HTML awal yang anda perlukan untuk memulakan. Simpan ini dalam fail dengan nama yang sesuai, seperti indeks.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Begini kodnya:

Ia agak sampah bukan? Mari pecahkannya sebelum kita memperbaikinya.

Kod ini mengandungi 'standard' HTML , kepala , gaya , skrip , dan badan tanda nama. Bahagian-bahagian ini adalah komponen penting dari mana-mana laman web. JQuery disertakan melalui CDN Google - tidak ada yang unik atau istimewa setakat ini.

Di dalam badan terdapat div dengan id persembahanContainer . Ini adalah pembungkus atau bekas luar untuk menyimpan tayangan slaid. Anda akan memperbaikinya kemudian dengan CSS. Di dalam bekas ini, terdapat tiga blok kod, masing-masing mempunyai tujuan yang serupa.

Kelas induk ditakrifkan dengan nama kelas gambarContainer :

Ini digunakan untuk menyimpan satu slaid - gambar dan kapsyen disimpan di dalam bekas ini. Setiap bekas mempunyai id unik, terdiri daripada watak-watak di dalam_ dan nombor. Setiap bekas mempunyai nombor yang berbeza, dari satu hingga tiga.

Sebagai langkah terakhir, gambar dirujuk, dan kapsyen disimpan di dalam div dengan kapsyen kelas:

Dog

Saya telah membuat gambar saya dengan nama fail berangka, dan menyimpannya di dalam folder yang dipanggil Gambar . Anda boleh memanggil apa sahaja yang anda suka, dengan syarat anda mengemas kini HTML agar sesuai.

Sekiranya anda ingin mempunyai lebih kurang gambar dalam tayangan slaid anda, cukup salin dan tampal atau hapus blok kod dengan gambarContainer kelas, ingat untuk mengemas kini nama fail dan id seperti yang diperlukan.

Akhirnya, butang navigasi dibuat. Ini membolehkan pengguna menavigasi gambar:

 ❮  
 ❯

Ini Entiti HTML kod digunakan untuk menampilkan anak panah ke depan dan ke belakang, dengan cara yang serupa dengan cara fon ikon berfungsi.

2. CSS

Sekarang struktur intinya sudah siap, inilah masanya untuk membuatnya kelihatan cantik . Beginilah rupa kod baru ini:

Tambahkan CSS ini di antara anda gaya teg:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

Itu kelihatan jauh lebih baik sekarang? Mari lihat kodnya.

Saya menggunakan contoh gambar 670 x 503 piksel , jadi tayangan slaid ini kebanyakannya dirancang berdasarkan gambar dengan ukuran itu. Anda perlu menyesuaikan CSS dengan betul jika anda ingin menggunakan gambar dengan ukuran yang berbeza. Saya cadangkan anda mengubah saiz gambar anda ke ukuran yang sepadan - gambar yang berlainan dengan dimensi yang berbeza akan menyebabkan masalah gaya.

Paling CSS ini adalah jelas. Terdapat kod untuk menentukan ukuran bekas untuk menyimpan gambar, menyelaraskan segala-galanya di tengah, menentukan fon, bersama dengan butang dan warna teks. Terdapat beberapa gaya yang mungkin tidak anda temui sebelumnya:

kursor: penunjuk - Ini mengubah kursor dari anak panah ke jari menunjuk ketika anda menggerakkan kursor ke butang.
kelegapan: 0.65 - Ini meningkatkan ketelusan butang.
pilih pengguna: tiada - Ini memastikan anda tidak dapat menonjolkan teks pada butang secara tidak sengaja.

Anda dapat melihat hasil sebahagian besar kod ini di butang:

Bahagian yang paling rumit di sini adalah garis pelik yang pelik ini:

.imageContainer:not(:first-child) {

Ia kelihatan agak luar biasa, namun cukup jelas.

Pertama, ia menyasarkan sebarang elemen dengan gambarContainer kelas. The : tidak () sintaks menyatakan bahawa sebarang elemen di dalam kurungan seharusnya dikecualikan dari gaya ini. Akhirnya, : anak pertama sintaks menyatakan bahawa CSS ini harus menyasarkan unsur yang sepadan dengan namanya tetapi abaikan elemen pertama. Sebabnya mudah. Kerana ini adalah tayangan slaid, hanya diperlukan satu gambar pada satu masa. CSS ini menyembunyikan semua gambar selain yang pertama.

3. JavaScript

Bahagian terakhir teka-teki adalah JavaScript. Ini adalah logik untuk benar-benar membuat tayangan slaid berfungsi dengan betul.

Tambahkan kod ini ke skrip teg:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

Ini mungkin kelihatan tidak intuitif, tetapi saya akan melangkau blok kod awal, dan melompat terus menerangkan kod dari separuh jalan - jangan risau, saya menerangkan semua kodnya!

Anda perlu menentukan dua pemboleh ubah. (Inilah cara menentukan pemboleh ubah dalam JavaScript.) Pemboleh ubah ini boleh dianggap sebagai pemboleh ubah konfigurasi utama untuk tayangan slaid:

var currentImage = 1;  
var totalImages = 3;

Ini menyimpan jumlah gambar dalam tayangan slaid, dan jumlah gambar untuk dimulakan. Sekiranya anda mempunyai lebih banyak gambar, ubah saja jumlah gambar berubah menjadi jumlah gambar yang anda ada.

Kedua-dua fungsi peningkatanImage dan penurunan Gambar maju atau mundur Imej semasa pemboleh ubah. Sekiranya pemboleh ubah ini lebih rendah daripada satu, atau lebih tinggi daripada jumlah gambar , ia diset semula ke satu atau jumlah gambar . Ini memastikan tayangan slaid akan bergulir sebaik sahaja sampai ke penghujungnya.

Kembali ke kod pada awalnya. Kod ini 'mensasarkan' butang seterusnya dan sebelumnya. Apabila anda mengklik setiap butang, ia memanggil yang sesuai meningkat atau berkurang kaedah. Setelah selesai, ia hanya akan memudar gambar di layar, dan memudar pada gambar baru (seperti yang ditentukan oleh Imej semasa pemboleh ubah).

The berhenti () kaedah dibina ke dalam jQuery. Ini membatalkan sebarang acara yang belum selesai. Ini memastikan setiap penekanan butang lancar, dan bermaksud anda tidak mempunyai 100 penekanan butang yang menunggu untuk dilaksanakan jika anda sedikit gila pada tetikus. The pudar (1) dan pudar (1) kaedah memudar atau keluar gambar seperti yang diperlukan. Nombor tersebut menentukan jangka masa pudar dalam milisaat. Cuba ubah ini menjadi bilangan yang lebih besar seperti 500. Bilangan yang lebih besar menghasilkan masa peralihan yang lebih lama. Namun, pergi terlalu jauh, dan anda mungkin mula melihat peristiwa aneh atau 'kelipan' di antara perubahan gambar. Inilah tayangan slaid dalam tindakan:

Kemajuan automatik

Tayangan slaid ini kelihatan cukup bagus sekarang, tetapi diperlukan satu sentuhan terakhir yang terakhir. Kemajuan automatik adalah ciri yang benar-benar akan menjadikan tayangan slaid ini bersinar. Setelah jangka masa yang ditetapkan, setiap gambar akan bergerak secara automatik ke gambar berikutnya. Namun, pengguna masih boleh menavigasi ke depan atau ke belakang.

cara memadam mesej di mac

Ini adalah kerja mudah dengan jQuery. Pemasa perlu dibuat untuk melaksanakan kod anda setiap X saat. Namun, daripada menulis kod baru, perkara paling mudah dilakukan adalah meniru 'klik' pada butang gambar seterusnya, dan membiarkan kod yang ada melakukan semua kerja.

Inilah JavaScript baru yang anda perlukan - tambahkan ini selepas penurunan Gambar fungsi:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

Tidak banyak yang berlaku di sini. The window.setInterval kaedah akan menjalankan sekeping kod secara berkala, seperti yang ditentukan oleh masa yang ditentukan pada akhir. Masa 2500 (dalam milisaat) bermaksud tayangan slaid ini akan maju setiap 2.5 saat. Bilangan yang lebih kecil bermaksud setiap gambar akan maju dengan kadar yang lebih cepat. The klik kaedah memicu butang untuk menjalankan kod seolah-olah pengguna telah mengklik butang dengan tetikus mereka.

Sekiranya anda bersedia untuk cabaran JavaScript seterusnya, cuba bina laman web dengan pembangun laman web statik seperti GatsbyJS, atau rangka depan seperti Vue. Sekiranya anda seorang pelajar Ruby, Jekyll juga merupakan pilihan. Inilah cara Jekyll dan GatsbyJS saling bertentangan.

Kredit Gambar: Tharanat Sardsri melalui Shutterstock.com

Berkongsi Berkongsi Tweet E-mel 8 laman web terbaik untuk memuat turun buku audio secara percuma

Buku audio adalah sumber hiburan yang hebat, dan lebih mudah dicerna. Berikut adalah lapan laman web terbaik di mana anda boleh memuat turunnya secara percuma.

Baca Seterusnya Topik-topik yang berkaitan

Pengaturcaraan
JavaScript
Reka Bentuk Web

Mengenai Pengarang Joe Coburn(136 Artikel Diterbitkan)

Joe adalah lulusan Sains Komputer dari University of Lincoln, UK. Dia seorang pembangun perisian profesional, dan ketika dia tidak terbang drone atau menulis muzik, dia sering didapati mengambil gambar atau menghasilkan video.

Lagi Dari Joe Coburn

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan