用html+css+js实现轮播图

以下是一个简单的HTML CSS JS轮播图示例：

HTML代码：

<div class="slideshow-container">
  <div class="slide">
    <img src="image1.jpg">
  </div>
  <div class="slide">
    <img src="image2.jpg">
  </div>
  <div class="slide">
    <img src="image3.jpg">
  </div>
</div>

<button class="prev">&#10094;</button>
<button class="next">&#10095;</button>

CSS代码：

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

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

.slide.active {
  opacity: 1;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  font-size: 24px;
  font-weight: bold;
  background-color: #fff;
  border: none;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

JS代码：

var slides = document.querySelectorAll('.slide');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
var slideIndex = 0;

function showSlide(n) {
  if (n > slides.length - 1) {
    slideIndex = 0;
  } else if (n < 0) {
    slideIndex = slides.length - 1;
  } else {
    slideIndex = n;
  }
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  slides[slideIndex].classList.add('active');
}

function prevSlide() {
  showSlide(slideIndex - 1);
}

function nextSlide() {
  showSlide(slideIndex + 1);
}

prevButton.addEventListener('click', prevSlide);
nextButton.addEventListener('click', nextSlide);

showSlide(slideIndex);
setInterval(nextSlide, 5000);

解释说明：

- HTML中，轮播图的图片通过`<img>`标签放置在`<div class="slide">`中；
- CSS中，轮播图容器`.slideshow-container`使用`position: relative`以及`overflow: hidden`来隐藏溢出的图片，`.slide`使用`position: absolute`和`opacity`来实现淡入淡出效果，`.prev`和`.next`使用`position: absolute`、`top`、`left`或`right`来放置按钮；
- JS中，使用`querySelectorAll`获取所有`.slide`元素，`querySelector`获取`.prev`和`.next`按钮，定义`slideIndex`变量表示当前图片的索引，`showSlide`函数根据传入的索引值显示对应的图片，`prevSlide`和`nextSlide`函数分别减少和增加`slideIndex`的值，最后，通过`addEventListener`为`prevButton`和`nextButton`添加点击事件，然后调用`showSlide`函数，实现轮播效果；最后，使用`setInterval`每隔5秒调用`nextSlide`函数，实现自动轮播。