请写一段html+css+js的轮播图代码

HTML代码：

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

CSS代码：

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

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

.slideshow-slide.active {
  opacity: 1;
}

.slideshow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

JavaScript代码：

const slides = document.querySelectorAll('.slideshow-slide');

let currentSlide = 0;

function showSlide() {
  slides[currentSlide].classList.add('active');
}

function hideSlide() {
  slides[currentSlide].classList.remove('active');
}

function nextSlide() {
  hideSlide();
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide();
}

function prevSlide() {
  hideSlide();
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide();
}

showSlide();

setInterval(nextSlide, 5000);

以上代码实现了一个简单的轮播图，包括HTML元素、CSS样式和JavaScript脚本。其中，HTML元素包括一个容器和多个轮播图元素，CSS样式设置了容器的样式和轮播图元素的样式，JavaScript脚本则实现了轮播图的功能，包括显示当前轮播图、隐藏当前轮播图、切换到下一个轮播图、切换到上一个轮播图和自动播放轮播图。