html css js轮播图

以下是一个使用HTML、CSS和JavaScript实现的简单轮播图的例子：

HTML部分：

<div class="slideshow-container">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS部分：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

JavaScript部分：

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;

function showSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

setInterval(showSlide, 3000);

这个例子中，我们使用了一个包含三个图片的轮播图容器，并使用CSS设置容器的样式。JavaScript部分则负责切换图片的显示。每隔3秒钟，当前显示的图片会被隐藏，下一张图片会显示出来。