Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat imej karusel html
Bagaimana untuk membuat imej karusel html
- WBOYasal
- 2023-05-06 13:13:074708semak imbas
Dengan perkembangan pesat Internet, pengeluaran tapak web telah menjadi semakin popular, dan imej karusel ialah elemen tapak web yang sangat biasa yang boleh menjadikan tapak web kelihatan lebih terang dan meriah. Bagaimana untuk melaksanakan karusel html mudah? jom tengok.
Pertama, dalam dokumen HTML baharu, perkenalkan fail .css dan fail .js di kepala, buat div baharu dalam badan dan tambah atribut kelas dan id.
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="slider" id="slider">
<!--轮播图内容-->
</div>
</body>
Seterusnya, tetapkan gaya karusel dalam fail .css. Mengambil imej karusel 1000×500 sebagai contoh, anda perlu menetapkan saiz dan kedudukan imej karusel, serta lebar dan ketinggian imej Anda juga perlu menetapkan kedudukan awal dan masa perubahan animasi imej dalam imej karusel.
.slider {
width: 1000px;
height: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
border: 2px solid #ddd;
}
.slider img {
width: 1000px;
height: 500px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.slider img.active {
opacity: 1;
z-index: 1;
}
Dalam fail .js, tambahkan kod karusel. Pertama, tentukan pembolehubah untuk menjejaki imej yang sedang dipaparkan. Kemudian, tetapkan pemasa untuk bertukar kepada imej seterusnya selepas 5000ms. Akhir sekali, kemas kini kelas imej semasa supaya imej semasa ditambah pada kelas aktif, dengan itu menukar kelegapannya.
var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");
var counter = 0;
setInterval(function() {
images[counter].classList.remove("active");
counter++;
if (counter == images.length) {
counter = 0;
}
images[counter].classList.add("active");
}, 5000);
Akhir sekali, anda hanya perlu menambah elemen imej dalam div gelangsar, seperti yang ditunjukkan di bawah:
<div class="slider" id="slider"> <img src="img1.jpg" class="active"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
Ini ialah proses melaksanakan imej karusel html ringkas. Sebagai elemen yang biasa digunakan pada tapak web, imej karusel bukan sahaja boleh menambah pengalaman visual tapak web, tetapi juga meningkatkan pengalaman pengguna tapak web. Mula mencipta karusel anda sendiri!
Atas ialah kandungan terperinci Bagaimana untuk membuat imej karusel html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!