用HTML，CSS JS 做一个图片轮播

好的，以下是一个简单的图片轮播的实现方法：

HTML部分：

<div class="slider">
  <img src="img1.jpg" class="slide">
  <img src="img2.jpg" class="slide">
  <img src="img3.jpg" class="slide">
  <img src="img4.jpg" class="slide">
  <img src="img5.jpg" class="slide">
</div>

CSS部分：

.slider {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

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

.slide.active {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

JS部分：

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

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

这段代码中，我们首先在HTML中定义了一个slider div，其中包含了多个img标签，每个img标签代表一张图片。我们通过CSS设置了slider的宽高和overflow属性，以及每个slide的宽高和opacity属性，使得只有active类的slide才显示在slider中。

在JS中，我们首先获取了所有的slides和currentSlide变量。我们使用setInterval函数每5秒钟调用一次nextSlide函数。在nextSlide函数中，我们先将当前的slide的active类移除，然后将currentSlide变量加1，取模slides.length，以便循环滑动。最后将新的slide添加active类，以显示在slider中。