html轮播图

HTML轮播图是一种在网页上显示多张图片并实现自动切换的效果的组件。常见的实现方式是使用HTML、CSS和JavaScript来实现。

下面是一个简单的HTML轮播图的示例：

HTML部分：

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS部分：

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
}

.slider img.active {
  transform: translateX(0%);
}

.slider img.next {
  transform: translateX(100%);
}

.slider img.prev {
  transform: translateX(-100%);
}

JavaScript部分：

const slider = document.querySelector('.slider');
const images = Array.from(document.querySelectorAll('.slider img'));

let currentIndex = 0;

function showImage(index) {
  images.forEach(image => {
    image.classList.remove('active', 'next', 'prev');
  });

  images[index].classList.add('active');
  if (index === 0) {
    images[images.length - 1].classList.add('prev');
    images[index + 1].classList.add('next');
  } else if (index === images.length - 1) {
    images[index - 1].classList.add('prev');
    images[0].classList.add('next');
  } else {
    images[index - 1].classList.add('prev');
    images[index + 1].classList.add('next');
  }
}

function nextImage() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  showImage(currentIndex);
}

function previousImage() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }
  showImage(currentIndex);
}

setInterval(nextImage, 3000);

以上代码会创建一个包含三张图片的轮播图，每隔3秒自动切换到下一张图片。用户也可以手动点击按钮来切换图片