Bagaimana untuk memutar imej dalam javascript

JavaScript ialah bahasa pengaturcaraan popular yang boleh memaparkan kandungan secara dinamik dalam halaman web. Dalam reka bentuk web, penggiliran imej adalah bahagian penting dalam meningkatkan interaktiviti dan daya tarikan halaman. Berikut akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan putaran imej.

1. Penyediaan HTML dan CSS

Dalam fail HTML, kita perlu terlebih dahulu menentukan bekas imej dan menggunakan struktur tag ul dan li untuk menulis kod. Teg ul mewakili bekas imej, dan teg li mewakili imej. Seperti yang ditunjukkan di bawah:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
</div>

Dalam fail CSS, kita perlu menetapkan gaya bekas imej dan imej, termasuk atribut seperti lebar, ketinggian, kedudukan, dsb., dan gunakan atribut limpahan:hidden untuk sembunyikan kandungan di luar bekas dan hanya paparkan bahagian yang ditentukan dalam julat. Seperti yang ditunjukkan di bawah:

#slider {
   width: 600px;
   height: 400px;
   position: relative;
   overflow: hidden;
 }
 
 #slider ul {
   position: absolute;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 300%;
 }
 
 #slider ul li {
   float: left;
   width: 33.33%;
   height: 400px;
 }

 #slider ul li img {
   width: 100%;
   height: 100%;
   display: block;
 }

2. Pelaksanaan JavaScript

Dalam JavaScript, kita perlu mengendalikan bekas imej untuk mencapai kesan putaran imej. Kita boleh menentukan pemasa untuk menghidupkan imej dari semasa ke semasa. Kodnya adalah seperti berikut:

var slider = document.getElementById("slider");
var ul = slider.children[0];
var liWidth = slider.offsetWidth / 3;
var currentIndex = 0;
var timer;

function autoPlay() {
  timer = setInterval(function() {
    currentIndex++;
    if (currentIndex >= 3) {
      currentIndex = 0;
    }
    ul.style.left = -currentIndex * liWidth + "px";
  }, 3000);
}
autoPlay();

Dalam kod, kami mula-mula mendapatkan peluncur bekas yang mengandungi imej dan elemen ul dalam bekas. Kita boleh mengira lebar setiap imej dengan membahagikan lebar bekas dengan bilangan li. Seterusnya, tentukan currentIndex pembolehubah yang memegang indeks imej semasa untuk menjejaki status putaran. Akhir sekali, kami menggunakan fungsi setInterval untuk menentukan pemasa yang berjalan setiap 3 saat untuk menukar nilai currentIndex dan margin kiri ul untuk memutarkan imej secara automatik. Juga, gunakan fungsi clearInterval untuk menghentikan pemasa apabila anda perlu menghentikan putaran.

3. Tambahkan penunjuk imej

Jika anda ingin menambah penunjuk pada kesan putaran imej, anda boleh menambah bekas penunjuk dalam kod HTML dan menggunakan JavaScript untuk mencipta penunjuk secara dinamik. Kodnya adalah seperti berikut:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
  <div id="indicator"></div>
</div>

var indicator = document.getElementById("indicator");

for (var i = 0; i < 3; i++) {
  var div = document.createElement("div");
  div.className = "dot";
  div.setAttribute("index", i);
  div.onclick = function() {
    currentIndex = parseInt(this.getAttribute("index"));
    ul.style.left = -currentIndex * liWidth + "px";
    setActive();
  };
  indicator.appendChild(div);
}

function setActive() {
  var dots = document.getElementsByClassName("dot");
  for (var i = 0; i < dots.length; i++) {
    if (currentIndex == i) {
      dots[i].className = "dot active";
    } else {
      dots[i].className = "dot";
    }
  }
}
setActive();

Kami mula-mula mendapatkan penunjuk bekas penunjuk, dan kemudian menggunakan pernyataan gelung untuk mencipta beberapa elemen div secara dinamik dengan atribut indeks untuk mewakili titik penunjuk setiap gambar. Kami kemudian menambah acara onclick untuk setiap titik penunjuk Apabila titik penunjuk diklik, indeks semasa indeks semasa ditukar, dan jidar kiri ul ditetapkan ke kiri, dan titik penunjuk ditetapkan kepada keadaan aktif. Dalam fungsi setActive, kami mengulangi semua titik penunjuk, menambah nama kelas aktif pada titik penunjuk yang dipilih pada masa ini, dan mendalamkan warna latar belakangnya untuk membezakannya daripada titik penunjuk yang tidak dipilih.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan HTML, CSS dan JavaScript untuk mencapai kesan putaran imej, sambil menambah penunjuk untuk meningkatkan pengalaman pengguna. Jika anda berminat untuk mempelajari pengaturcaraan JavaScript secara mendalam, adalah disyorkan untuk mengamalkan animasi web yang lebih serupa, reka bentuk interaksi dan kesan khas untuk meningkatkan kemahiran anda dan pengalaman pembangunan projek praktikal.

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