Cara Membuat Slideshow JavaScript dalam 3 Langkah Mudah

Jika Anda sudah membaca panduan kami di cara membuat situs web , Anda mungkin bertanya-tanya apa yang harus dilakukan selanjutnya untuk meningkatkan keterampilan Anda. Membuat tayangan slide foto adalah tugas yang sangat mudah, dan dapat mengajari Anda keterampilan berharga yang dibutuhkan untuk mendapatkan pekerjaan pemrograman .

Hari ini saya akan menunjukkan cara membuat slideshow JavaScript dari awal. Ayo langsung masuk!

Prasyarat

Anda perlu mengetahui beberapa hal sebelum dapat memulai coding. Di samping browser web dan editor teks yang sesuai pilihan Anda (saya sarankan Teks Sublim ), Anda perlu pengalaman dengan HTML , CSS , JavaScript , dan jQuery .

Jika Anda tidak begitu percaya diri dengan keterampilan Anda, pastikan Anda membaca panduan kami untuk menggunakan Model Objek Dokumen dan tips ini untuk mempelajari CSS . Jika Anda yakin dengan JavaScript tetapi belum pernah menggunakan jQuery sebelumnya, lihat panduan dasar kami untuk jQuery .

1. Memulai

Slideshow ini membutuhkan beberapa fitur:

Dukungan untuk gambar
Kontrol untuk mengubah gambar
Sebuah teks teks
Mode otomatis

Tampaknya daftar fitur sederhana. Mode otomatis akan secara otomatis memajukan gambar ke gambar berikutnya secara berurutan. Inilah sketsa kasar yang saya lakukan sebelum menulis kode apa pun:

Jika Anda bertanya-tanya mengapa repot-repot merencanakan, lihatlah kesalahan pemrograman terburuk dalam sejarah ini. Proyek ini tidak akan membuat siapa pun terbunuh, tetapi sangat penting untuk memiliki pemahaman yang kuat tentang kode dan prosedur perencanaan sebelum mengerjakan kode yang lebih besar -- bahkan jika itu hanya sketsa kasar.

Inilah HTML awal yang Anda butuhkan untuk memulai. Simpan ini dalam file dengan nama yang sesuai, seperti index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Berikut tampilan kodenya:

Ini sedikit sampah bukan? Mari kita hancurkan sebelum kita memperbaikinya.

Kode ini berisi 'standar' HTML , kepala , gaya , naskah , dan tubuh tag. Bagian-bagian ini adalah komponen penting dari situs web apa pun. JQuery disertakan melalui CDN Google -- sejauh ini tidak ada yang unik atau istimewa.

Di dalam tubuh adalah div dengan id acaraContainer . Ini adalah pembungkus atau wadah luar untuk menyimpan slideshow. Anda akan meningkatkan ini nanti dengan CSS. Di dalam wadah ini, ada tiga blok kode, masing-masing dengan tujuan yang sama.

Kelas induk didefinisikan dengan nama kelas gambarContainer :

Ini digunakan untuk menyimpan satu slide -- gambar dan keterangan disimpan di dalam wadah ini. Setiap wadah memiliki id unik, yang terdiri dari karakter dalam_ dan nomor. Setiap wadah memiliki nomor yang berbeda, dari satu hingga tiga.

Sebagai langkah terakhir, gambar direferensikan, dan keterangan disimpan di dalam div dengan keterangan kelas:

Dog

Saya telah membuat gambar saya dengan nama file numerik, dan menyimpannya di dalam folder bernama Gambar-gambar . Anda dapat memanggil milik Anda apa pun yang Anda suka, asalkan Anda memperbarui HTML agar sesuai.

Jika Anda ingin memiliki lebih banyak atau lebih sedikit gambar dalam tayangan slide Anda, cukup salin dan tempel atau hapus blok kode dengan gambarContainer kelas, ingat untuk memperbarui nama file dan id sesuai kebutuhan.

Akhirnya, tombol navigasi dibuat. Ini memungkinkan pengguna untuk menavigasi melalui gambar:

 ❮  
 ❯

Ini entitas HTML kode digunakan untuk menampilkan panah maju dan mundur, dengan cara yang mirip dengan cara kerja font ikon .

2. CSSnya

Sekarang struktur inti sudah terpasang, saatnya untuk membuatnya terlihat cukup . Berikut tampilannya setelah kode baru ini:

Tambahkan CSS ini di antara Anda gaya tag:

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 terlihat jauh lebih baik sekarang kan? Mari kita lihat kodenya.

Saya menggunakan gambar sampel itu saja 670 x 503 piksel , jadi tayangan slide ini sebagian besar telah dirancang di sekitar gambar dengan ukuran itu. Anda harus menyesuaikan CSS dengan tepat jika ingin menggunakan gambar dengan ukuran berbeda. Saya sarankan Anda mengubah ukuran gambar Anda ke ukuran yang cocok -- gambar yang berbeda dari dimensi yang berbeda akan menyebabkan masalah gaya.

Paling CSS ini cukup jelas. Ada kode untuk menentukan ukuran wadah untuk menyimpan gambar, ratakan tengah semuanya, tentukan font, bersama dengan tombol dan warna teks. Ada beberapa gaya yang mungkin belum pernah Anda temui sebelumnya:

kursor: penunjuk -- Ini mengubah kursor dari panah menjadi jari penunjuk saat Anda menggerakkan kursor di atas tombol.
opasitas: 0,65 -- Ini meningkatkan transparansi tombol.
pilihan pengguna: tidak ada -- Ini memastikan Anda tidak dapat secara tidak sengaja menyorot teks pada tombol.

Anda dapat melihat hasil dari sebagian besar kode ini di tombol:

Bagian paling kompleks di sini adalah garis yang tampak aneh ini:

.imageContainer:not(:first-child) {

Ini mungkin terlihat sangat tidak biasa, namun cukup jelas.

Pertama, ia menargetkan elemen apa pun dengan gambarContainer kelas. NS :bukan() sintaks menyatakan bahwa setiap elemen di dalam tanda kurung harus pengecualian dari gaya ini. Akhirnya, :anak pertama sintaks menyatakan bahwa CSS ini harus menargetkan elemen apa pun yang cocok dengan namanya tetapi mengabaikan elemen pertama. Alasannya sederhana. Karena ini adalah tayangan slide, hanya satu gambar yang diperlukan dalam satu waktu. CSS ini menyembunyikan semua gambar selain dari yang pertama.

3. JavaScript

Bagian terakhir dari teka-teki adalah JavaScript. Ini adalah logika untuk benar-benar membuat slideshow berfungsi dengan benar.

Tambahkan kode ini ke Anda naskah menandai:

$(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 tampak kontra-intuitif, tetapi saya akan melewati blok kode awal, dan langsung menjelaskan kode dari setengah jalan -- jangan khawatir, saya menjelaskan semua kode!

Anda perlu mendefinisikan dua variabel. (Berikut cara mendefinisikan variabel dalam JavaScript .) Variabel ini dapat dianggap sebagai variabel konfigurasi utama untuk tayangan slide:

var currentImage = 1;  
var totalImages = 3;

Ini menyimpan jumlah total gambar dalam tayangan slide, dan jumlah gambar untuk memulai. Jika Anda memiliki lebih banyak gambar, cukup ubah totalGambar variabel dengan jumlah total gambar yang Anda miliki.

Kedua fungsi tersebut meningkatkanGambar dan penurunanGambar maju atau mundur gambar saat ini variabel. Haruskah variabel ini lebih rendah dari satu, atau lebih tinggi dari totalGambar , itu akan diatur ulang ke satu atau totalGambar . Ini memastikan tayangan slide akan berulang setelah mencapai akhir.

Kembali ke kode di awal. Kode ini 'menargetkan' tombol berikutnya dan sebelumnya. Ketika Anda mengklik setiap tombol, itu memanggil yang sesuai meningkatkan atau mengurangi metode. Setelah selesai, itu hanya memudarkan gambar di layar, dan memudar di gambar baru (seperti yang didefinisikan oleh gambar saat ini variabel).

NS berhenti() metode dibangun ke dalam jQuery. Ini membatalkan semua acara yang tertunda. Ini memastikan setiap penekanan tombol lancar, dan berarti Anda tidak memiliki 100 penekanan tombol yang menunggu untuk dieksekusi jika Anda sedikit gila pada mouse. NS memudarDalam (1) dan memudar(1) metode fade in atau out gambar sesuai kebutuhan. Angka tersebut menentukan durasi fade dalam milidetik. Coba ubah ini ke angka yang lebih besar seperti 500. Angka yang lebih besar menghasilkan waktu transisi yang lebih lama. Namun, pergi terlalu jauh, dan Anda mungkin mulai melihat kejadian aneh atau 'kedipan' di antara perubahan gambar. Inilah slideshow yang sedang beraksi:

Kemajuan Otomatis

Tampilan slide ini terlihat cukup bagus sekarang, tetapi ada satu sentuhan terakhir yang diperlukan. Kemajuan otomatis adalah fitur yang benar-benar akan membuat tayangan slide ini bersinar. Setelah jangka waktu tertentu, setiap gambar akan secara otomatis maju ke gambar berikutnya. Namun, pengguna masih dapat menavigasi maju atau mundur.

amazon mengatakan terkirim tetapi tidak ada paket

Ini adalah pekerjaan yang mudah dengan jQuery. Timer perlu dibuat untuk mengeksekusi kode Anda setiap x detik. Namun, daripada menulis kode baru, hal termudah untuk dilakukan adalah meniru 'klik' pada tombol gambar berikutnya, dan biarkan kode yang ada melakukan semua pekerjaan.

Inilah JavaScript baru yang Anda butuhkan -- tambahkan ini setelah penurunanGambar fungsi:

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

Tidak banyak yang terjadi di sini. NS window.setInterval metode akan menjalankan sepotong kode secara teratur, seperti yang ditentukan oleh waktu yang ditentukan di akhir. Waktu 2500 (dalam milidetik) berarti tayangan slide ini akan maju setiap 2,5 detik. Angka yang lebih kecil berarti setiap gambar akan bergerak lebih cepat. NS klik metode memicu tombol untuk menjalankan kode seolah-olah pengguna telah mengklik tombol dengan mouse mereka.

Jika Anda siap untuk tantangan JavaScript berikutnya, coba buat situs web dengan pembuat situs web statis seperti GatsbyJS, atau kerangka kerja front-end seperti Vue . Jika Anda seorang pelajar Ruby, Jekyll juga merupakan pilihan. Inilah cara Jekyll dan GatsbyJS saling bersaing .

Kredit Gambar: Tharanat Sardsri melalui Shutterstock.com

Membagikan Membagikan Menciak Surel 8 Situs Web Terbaik untuk Mengunduh Buku Audio Gratis

Buku audio adalah sumber hiburan yang hebat, dan lebih mudah dicerna. Berikut adalah delapan situs web terbaik tempat Anda dapat mengunduhnya secara gratis.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
JavaScript
Desain web

Tentang Penulis Joe Coburn(136 Artikel Diterbitkan)

Joe adalah lulusan Ilmu Komputer dari University of Lincoln, Inggris. Dia adalah pengembang perangkat lunak profesional, dan ketika dia tidak menerbangkan drone atau menulis musik, dia sering terlihat sedang mengambil foto atau membuat video.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan