Rumah > Artikel > hujung hadapan web > JavaScript melaksanakan main balik gambar automatik
Kini, dengan perkembangan berterusan teknologi Internet, reka bentuk web telah menjadi industri yang sangat penting. Sebagai elemen yang sangat penting, gambar sering digunakan dalam reka bentuk halaman untuk mencantikkan halaman, meningkatkan kesan penghantaran maklumat, dan menarik perhatian pengguna. Mempersembahkan beberapa elemen dinamik pada halaman bukan sahaja boleh memperkayakan kandungan halaman, tetapi juga menyediakan pengguna dengan kesan deria yang lebih intuitif dan pengalaman pengguna yang lebih baik semasa menyemak imbas. Artikel ini akan memperkenalkan cara JavaScript melaksanakan main balik imej automatik.
1. Prinsip karusel automatik
Karusel gambar, seperti namanya, membenarkan berbilang gambar dimainkan dan ditukar secara automatik. Prinsip karusel automatik direalisasikan dengan bantuan pemasa JavaScript: apabila bilangan halaman karusel ditentukan, fungsi setInterval() digunakan untuk menukar gambar dengan kerap jika karusel tidak terhingga, setTimeout() digunakan untuk melaksanakan panggilan rekursif untuk mencapai kesan karusel .
2. Struktur HTML
Untuk melaksanakan karusel automatik, anda perlu mencipta bekas gelung dan imej dalam HTML, seperti berikut:
<div class="carousel-container"> <img src="images/pic1.png" alt="image 1"> <img src="images/pic2.png" alt="image 2"> <img src="images/pic3.png" alt="image 3"> </div>
3
Tetapkan gaya bekas karusel, seperti berikut:.carousel-container{ width: 100%; height: 500px; position: relative; overflow: hidden; } .carousel-container img{ width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.6s ease-in-out; } .carousel-container img.active{ opacity: 1; }4 Laksanakan karusel dengan JavaScript1 Dapatkan imej dan bekas
var carouselContainer = document.querySelector('.carousel-container'); var carouselImgs = carouselContainer.querySelectorAll('img');2 Karusel Sebelum memulakan karusel, anda boleh menambah nama kelas "aktif" pada gambar pertama dan menetapkan indeks pembilang untuk mewakili gambar karusel semasa, supaya anda boleh bertukar kepada yang seterusnya dalam gambar seterusnya gambar langkah.
var index = 0; carouselImgs[index].classList.add('active');
setInterval(function(){ index++; if(index >= carouselImgs.length){ index = 0; } carouselImgs.forEach(function(img){ img.classList.remove('active'); }); carouselImgs[index].classList.add('active'); }, 3000);Karusel terhad:
var timer = setInterval(function(){ index++; if(index >= carouselImgs.length){ clearInterval(timer); return; } carouselImgs.forEach(function(img){ img.classList.remove('active'); }); carouselImgs[index].classList.add('active'); }, 3000);Seperti yang anda boleh lihat di sini, dengan menetapkan indeks kaunter, anda boleh memastikan kedudukan yang sepadan dilalui setiap kali, dan pada masa yang sama Kami menetapkan pemasa untuk memutar imej seterusnya setiap 3 saat. 4. Tambah pendengar acara Sesetengah pengguna mungkin mahu mengklik pada imej untuk melompat ke halaman yang berkaitan, kami perlu menambah pendengar acara pada imej.
carouselImgs.forEach(function(img){ img.addEventListener('click', function(e){ var targetURL = e.target.getAttribute('data-href'); if(targetURL){ window.location.href=targetURL; } }); });Di sini, kami memantau gelagat klik pengguna melalui pemantauan acara, dan mendapatkan pautan yang sepadan dengan imej melalui kaedah "getAttribute()", supaya klik pada imej melompat ke halaman sasaran. 5. RingkasanSelepas langkah di atas, kita boleh berjaya mencapai kesan putaran imej automatik. Walau bagaimanapun, perlu diingatkan bahawa imej karusel tidak boleh digunakan pada semua halaman Hanya senario yang sesuai dan reka bentuk yang sesuai boleh menghasilkan hasil yang baik. Kesan karusel imej automatik yang dicapai melalui kaedah di atas juga mempunyai had tertentu Apabila terdapat berbilang imej karusel pada halaman pada masa yang sama, konflik mungkin wujud, menjejaskan pelaksanaan program. Oleh itu, kita perlu membuat pelarasan yang munasabah dan digunakan dalam aplikasi praktikal untuk menghasilkan hasil yang terbaik.
Atas ialah kandungan terperinci JavaScript melaksanakan main balik gambar automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!