Rumah > Artikel > hujung hadapan web > JavaScript melaksanakan karusel hierarki imej
JavaScript melaksanakan karusel hierarki imej
- 王林asal
- 2023-05-26 15:54:38609semak imbas
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>
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;
}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;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";
}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);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>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!