用js+css+html做一个轮播效果

好的，以下是一个简单的轮播效果，使用HTML、CSS和JavaScript实现：

HTML部分：

<div class="slideshow-container">
  <div class="slide">
    <img src="img1.jpg">
  </div>
  <div class="slide">
    <img src="img2.jpg">
  </div>
  <div class="slide">
    <img src="img3.jpg">
  </div>
</div>

CSS部分：

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

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

.slide.active {
  opacity: 1;
}

JavaScript部分：

let slides = document.querySelectorAll('.slide');
let currentSlide = 0;
let slideInterval = setInterval(nextSlide, 2000);

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

在上述代码中，我们首先使用HTML定义了轮播图的结构，包括一个容器（`.slideshow-container`）和多个轮播项（`.slide`），每个轮播项内包含一张图片。然后使用CSS设置了容器的样式和轮播项的样式，包括宽高、定位、透明度等。最后使用JavaScript实现了轮播功能，使用`setInterval`方法来定时切换轮播项，并在切换时添加和删除`active`类来控制轮播项的显示和隐藏。