CSS和HTML實(shí)現(xiàn)輪播圖的方法

1、HTML結(jié)構(gòu)：我們需要?jiǎng)?chuàng)建一個(gè)HTML結(jié)構(gòu)來(lái)承載我們的輪播圖，這個(gè)結(jié)構(gòu)通常包括一個(gè)容器元素和兩個(gè)子元素：一個(gè)是圖片列表，另一個(gè)是導(dǎo)航按鈕。

<div class="slider">
  <div class="image-list">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="nav-buttons">
    <button class="prev-button">Prev</button>
    <button class="next-button">Next</button>
  </div>
</div>

2、CSS樣式：我們將使用CSS來(lái)定義輪播圖的外觀和功能，我們需要設(shè)置容器的寬度和高度，以及圖片列表和導(dǎo)航按鈕的位置，我們將使用JavaScript來(lái)添加輪播功能。

.slider {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.image-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-list img {
  width: 100%;
  height: 100%;
}
.nav-buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3、JavaScript實(shí)現(xiàn)輪播功能：我們將使用JavaScript來(lái)實(shí)現(xiàn)輪播功能，我們將創(chuàng)建一個(gè)函數(shù)來(lái)切換圖片，并在導(dǎo)航按鈕上添加事件監(jiān)聽(tīng)器來(lái)調(diào)用這個(gè)函數(shù)。

let currentImageIndex = 0;
const imageList = document.querySelector(".image-list");
const prevButton = document.querySelector(".prev-button");
const nextButton = document.querySelector(".next-button");
function switchImage() {
  currentImageIndex = (currentImageIndex + 1) % imageList.children.length;
  imageList.style.transform =translateX(-${currentImageIndex * 100}%);
}
prevButton.addEventListener("click", () => {
  currentImageIndex = (currentImageIndex - 1 + imageList.children.length) % imageList.children.length;
  imageList.style.transform =translateX(-${currentImageIndex * 100}%);
});
nextButton.addEventListener("click", switchImage);