Bagaimana untuk membuat imej karusel html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membuat imej karusel html

WBOY

Lepaskan： 2023-05-06 13:13:07

asal

4756 orang telah melayarinya

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!