JavaScript melaksanakan karusel hierarki imej-Soal Jawab bahagian hadapan-php.cn

JavaScript melaksanakan karusel hierarki imej

王林

Lepaskan： 2023-05-26 15:54:38

asal

633 orang telah melayarinya

Dalam reka bentuk web, karusel imej sering digunakan sebagai kaedah paparan penting pada halaman. Untuk meningkatkan pengalaman menyemak imbas pengguna, kami memerlukan kaedah pelaksanaan yang cekap dan mudah, dan JavaScript ialah pilihan yang baik untuk melaksanakan karusel imej. Artikel ini akan memperkenalkan cara menggunakan javascript untuk melaksanakan karusel hierarki imej.

1. Penerangan ringkas tentang prinsip

Prinsip karusel hierarki gambar adalah untuk memaparkan berbilang gambar dalam susunan tertentu Untuk memastikan penukaran lancar, gambar perlu dipaparkan dalam lapisan , setiap kali ia ditukar , hanya alihkan imej peringkat atas ke imej peringkat bawah untuk mencapai karusel. Seterusnya, kami akan melaksanakan karusel hierarki imej melalui javascript.

2. Langkah pelaksanaan

1. Cipta struktur HTML

Karusel gambar perlu mentakrifkan elemen bekas untuk mengandungi semua elemen gambar. Di sini kita mencipta elemen div dan menentukan idnya sebagai "bekas".

<div id="container">
   <img src="img/1.jpg" alt="">
   <img src="img/2.jpg" alt="">
   <img src="img/3.jpg" alt="">
   ...
</div>

Salin selepas log masuk

2. Tetapkan gaya untuk elemen bekas

Untuk memaparkan karusel dengan lancar, kita perlu menetapkan atribut lebar, tinggi dan limpahan:tersembunyi untuk elemen kontena.

#container{
  width:800px;
  height:500px;
  overflow:hidden;
}

Salin selepas log masuk

3. Dapatkan lebar elemen imej dan bekas

Untuk melaksanakan karusel hierarki imej, kita perlu mendapatkan lebar elemen imej dan elemen bekas. Untuk mendapatkan elemen imej melalui javascript, anda boleh menggunakan kaedah document.getElementsByTagName() untuk mendapatkan semua imej dalam bekas.

var container = document.getElementById("container");
var imgs = container.getElementsByTagName("img");
var imgWidth = container.offsetWidth;

Salin selepas log masuk

4. Tetapkan gaya elemen gambar

Untuk mencapai paparan hierarki gambar, kita perlu meletakkan elemen gambar secara mutlak dan memaparkannya dalam lapisan. Letakkan gambar pertama pada lapisan atas, kumpulkan nilai atribut indeks-z gambar lain, dan tetapkan gaya dalam urutan.

for(var i=0;i<imgs.length;i++){
  if(i==0){
    imgs[i].style.zIndex = "10";
  }else{
    imgs[i].style.zIndex = "10"+i;
  }
  imgs[i].style.position = "absolute";
  imgs[i].style.top = 0;
  imgs[i].style.left = imgWidth*i +"px";
}

Salin selepas log masuk

5. Tetapan kesan animasi

Untuk mencapai peralihan imej yang lancar, kesan animasi diperlukan Di sini kami menggunakan pemasa javascript (setInterval) untuk melaksanakan animasi karusel. Dalam pemasa, kami mengalihkan gambar pertama, dan selepas animasi tamat, alihkan gambar pertama ke tahap paparan terakhir. Pada masa yang sama, dengan menolak imgWidth daripada nilai kiri gambar lain, pergerakan lancar keseluruhan ke kiri dicapai.

var index = 0;
setInterval(function(){
  var next = (index+1)%imgs.length;
  imgs[index].style.left = 0-imgWidth +"px";
  imgs[index].style.zIndex = "10";
  imgs[next].style.left = imgWidth*(imgs.length-1)+"px";
  imgs[next].style.zIndex = "100";
  index=next;
},3000);

Salin selepas log masuk

3. Kod lengkap

Kod akhir yang dilaksanakan adalah seperti berikut:

<html>
<head>
<style>
#container{
  width:800px;
  height:500px;
  overflow:hidden;
}
#container img{
  width:800px;
  height:500px;
}
</style>
</head>
<body>
   <div id="container">
     <img src="img/1.jpg" alt="">
     <img src="img/2.jpg" alt="">
     <img src="img/3.jpg" alt="">
     <img src="img/4.jpg" alt="">
     <img src="img/5.jpg" alt="">
   </div>
   <script>
      var container = document.getElementById("container");
      var imgs = container.getElementsByTagName("img");
      var imgWidth = container.offsetWidth;
      for(var i=0;i<imgs.length;i++){
        if(i==0){
          imgs[i].style.zIndex = "10";
        }else{
          imgs[i].style.zIndex = "10"+i;
        }
        imgs[i].style.position = "absolute";
        imgs[i].style.top = 0;
        imgs[i].style.left = imgWidth*i +"px";
      }
      var index = 0;
      setInterval(function(){
        var next = (index+1)%imgs.length;
        imgs[index].style.left = 0-imgWidth +"px";
        imgs[index].style.zIndex = "10";
        imgs[next].style.left = imgWidth*(imgs.length-1)+"px";
        imgs[next].style.zIndex = "100";
        index=next;
      },3000);
   </script>
</body>
</html>

Salin selepas log masuk

4 Ringkasan

Menggunakan javascript untuk melaksanakan karusel hierarki imej boleh. meningkatkan kesan paparan halaman dan pengalaman menyemak imbas pengguna. Artikel ini memperkenalkan prinsip dan langkah pelaksanaan karusel hierarki imej, dan menyediakan kod lengkap saya harap ia akan membantu pembelajaran dan aplikasi semua orang.

Atas ialah kandungan terperinci JavaScript melaksanakan karusel hierarki imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!