用H5+JS写一个轮播图

好的，以下是一个简单的 H5+JS 轮播图示例：

HTML 代码：

<div class="slider">
  <div class="slides">
    <img src="img/slide1.jpg">
    <img src="img/slide2.jpg">
    <img src="img/slide3.jpg">
  </div>
  <div class="controls">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>

CSS 代码：

.slider {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slides {
  width: 300%;
  height: 100%;
  display: flex;
  transition: all 0.5s ease;
}

.slides img {
  width: 33.333%;
  height: 100%;
  object-fit: cover;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.controls button {
  margin: 0 10px;
  padding: 10px;
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}

JS 代码：

const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentSlide = 0;

// 移动到指定的幻灯片
function moveToSlide(slide) {
  slides.style.transform = `translateX(-${slide * 100}%)`;
  currentSlide = slide;
}

// 上一个幻灯片
function prevSlide() {
  currentSlide = currentSlide > 0 ? currentSlide - 1 : 2;
  moveToSlide(currentSlide);
}

// 下一个幻灯片
function nextSlide() {
  currentSlide = currentSlide < 2 ? currentSlide + 1 : 0;
  moveToSlide(currentSlide);
}

// 上一个和下一个按钮的事件监听器
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

// 每隔 3 秒自动切换到下一个幻灯片
setInterval(nextSlide, 3000);

这个轮播图是一个基本的，它包括三张图片，两个按钮（上一个和下一个），并且自动循环播放。您可以根据自己的需要进行修改和扩展。