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 JavaScript

1 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');

Tetapkan pemasa

Semasa proses karusel, anda perlu menukar gambar setiap masa tertentu Berikut ialah dua kaedah pelaksanaan: karusel tak terhingga dan Putaran terhad. Perbezaannya terletak pada sama ada untuk memulakan semula traversal dari awal selepas semua gambar dilalui.

Karusel tak terhingga:

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. Ringkasan

Selepas 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!