Slider Teks dengan Anak Panah dalam JavaScript
Sekarang mari kita buat slider teks dengan anak panah. Ini bermakna teks akan bertukar bukan mengikut pemasa, tetapi dengan mengklik anak panah. Mari tambahkan anak panah dalam kod HTML kami:
<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>
Kehalusan utama penyelesaian slider ini ialah pembolehubah-pembilang teks mesti menjadi umum untuk pengendali klik anak panah kami:
let i = 0; // pembolehubah luaran
left.addEventListener('click', function() {
// kurangkan i sebanyak 1
// dan paparkan teks dengan nombor i
});
right.addEventListener('click', function() {
// tambahkan i sebanyak 1
// dan paparkan teks dengan nombor i
});
Dan kehalusan kedua ialah, sama ada ketika mengurangkan
i, atau ketika menambah, kita tidak boleh melebihi
nombor kurang daripada sifar dan lebih daripada elemen terakhir
array.
Laksanakan slider yang diterangkan. Buat supaya teks-teks berputar secara bulatan.
Ubah suai tugas sebelumnya supaya teks-teks tidak berputar secara bulatan, tetapi hanya tidak menatal lebih jauh setelah mencapai kedudukan paling kanan atau paling kiri.