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

Rumah

Bagaimana untuk membuat imej karusel html

May 06, 2023 pm 01:13 PM

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.

&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
  &lt;div class=&quot;slider&quot; id=&quot;slider&quot;&gt;
    &lt;!--轮播图内容--&gt;
  &lt;/div&gt;
&lt;/body&gt;

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:

&lt;div class=&quot;slider&quot; id=&quot;slider&quot;&gt;
  &lt;img src=&quot;img1.jpg&quot; class=&quot;active&quot;&gt;
  &lt;img src=&quot;img2.jpg&quot;&gt;
  &lt;img src=&quot;img3.jpg&quot;&gt;
&lt;/div&gt;

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Tag artikel panas

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7135

Tutorial Java

1534

Tutorial Laravel

1257

Tutorial PHP

1205

Tutorial CakePHP

1155

Tunjukkan Lagi

Related knowledge

Terangkan konsep pemuatan malas. Mar 13, 2025 pm 07:47 PM

Terangkan konsep pemuatan malas.

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Mar 19, 2025 pm 03:58 PM

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?

Bagaimanakah algoritma Rekonsiliasi React berfungsi? Mar 18, 2025 pm 01:58 PM

Bagaimanakah algoritma Rekonsiliasi React berfungsi?

Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya. Mar 19, 2025 pm 01:46 PM

Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya.

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Mar 18, 2025 pm 01:44 PM

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?