Bagaimana untuk menulis imej karusel javascript js-Soal Jawab bahagian hadapan-php.cn

Pelaksanaan carta karusel JavaScript boleh menggunakan kod JavaScript asli atau merujuk beberapa perpustakaan pihak ketiga yang matang (seperti jQuery, dll.).

Mari kita ambil kod JavaScript asli sebagai contoh untuk memperkenalkan cara melaksanakan carta karusel JavaScript.

Langkah pertama: Struktur HTML

Pertama, kita perlu mentakrifkan struktur karusel dalam HTML, termasuk bekas imej, anak panah kiri dan kanan, butang navigasi, dsb. Contohnya:

Salin selepas log masuk

Antaranya,slider-containerialah bekas karusel,slider-wrapperialah bekas imej,slider-prevdanslider-nextialah anak panah kiri dan kanan, danslider-dotsdanslider-dotialah butang navigasi.

Langkah 2: Gaya CSS

Seterusnya, kita perlu menetapkan gaya untuk imej karusel, termasuk lebar, ketinggian, kedudukan, dll. bekas, reka letak dan saiz imej, dsb., dan gaya butang navigasi dsb.

.slider-container { position: relative; width: 800px; height: 400px; overflow: hidden; } .slider-wrapper { position: absolute; width: 2400px; height: 400px; left: 0; top: 0; } .slider-wrapper img { float: left; width: 800px; height: 400px; } .slider-prev, .slider-next { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; background-image: url("arrow.png"); background-repeat: no-repeat; background-size: 40px auto; cursor: pointer; } .slider-prev { left: 20px; transform: rotate(180deg); } .slider-next { right: 20px; } .slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .slider-dot { display: inline-block; margin: 0 10px; width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .slider-dot.active { background-color: #f90; }

Salin selepas log masuk

Di atas adalah beberapa gaya contoh mudah Sudah tentu, gaya khusus boleh dilaraskan mengikut keperluan anda.

Langkah 3: Kod JavaScript

Sekarang mula menulis kod JavaScript untuk mencapai kesan karusel. Mula-mula kita perlu mendapatkan rujukan setiap elemen, seperti:

var container = document.querySelector('.slider-container'); var wrapper = document.querySelector('.slider-wrapper'); var prev = document.querySelector('.slider-prev'); var next = document.querySelector('.slider-next'); var dots = document.querySelectorAll('.slider-dot');

Salin selepas log masuk

Kemudian, kita perlu menetapkan beberapa parameter dan pembolehubah, seperti:

var index = 0; // 当前图片的索引 var interval = 3000; // 切换时间间隔（3秒） var timer = null; // 定时器

Salin selepas log masuk

Seterusnya, kita perlu untuk menulis beberapa fungsi, Laksanakan fungsi asas karusel:

Tukar gambar:

function changeImage() { wrapper.style.transform = 'translateX(-' + index * 800 + 'px)'; for (var i = 0; i < dots.length; i++) { dots[i].classList.remove('active'); } dots[index].classList.add('active'); }

Salin selepas log masuk

Penukaran automatik:

function autoPlay() { timer = setInterval(function() { index++; if (index >= dots.length) { index = 0; } changeImage(); }, interval); }

Salin selepas log masuk

Hentikan pensuisan automatik:

function stopAutoPlay() { clearInterval(timer); }

Salin selepas log masuk

Kendalikan acara klik butang navigasi:

for (var i = 0; i < dots.length; i++) { dots[i].addEventListener('click', function() { index = this.getAttribute('data-index'); changeImage(); stopAutoPlay(); }); }

Salin selepas log masuk

Kendalikan acara klik anak panah kiri dan kanan:

prev.addEventListener('click', function() { index--; if (index < 0) { index = dots.length - 1; } changeImage(); stopAutoPlay(); }); next.addEventListener('click', function() { index++; if (index >= dots.length) { index = 0; } changeImage(); stopAutoPlay(); });

Salin selepas log masuk

Akhir sekali, kami memulakan penukaran automatik selepas halaman dimuatkan:

window.addEventListener('load', function() { autoPlay(); });

Salin selepas log masuk

Ringkasnya, berikut ialah langkah untuk melaksanakan carta karusel JavaScript yang mudah. Sudah tentu, lebih banyak fungsi boleh dikembangkan mengikut keperluan, seperti kesan fade-in dan fade-out, pemuatan malas, susun atur responsif, dll.

Atas ialah kandungan terperinci Bagaimana untuk menulis imej karusel javascript js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!