你可以给我示例前端的自动轮播图的源码嘛

当然可以，以下是一个简单的前端自动轮播图的示例代码，使用了 HTML、CSS 和 JavaScript：

HTML 代码：

<div class="slideshow-container">
  <div class="slideshow-slide">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slideshow-slide">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slideshow-slide">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS 代码：

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

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

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

JavaScript 代码：

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

// 设置定时器，每 3 秒切换一次图片
setInterval(() => {
  // 隐藏当前图片
  slides[currentSlide].classList.remove('active');
  // 计算下一张图片的索引
  currentSlide = (currentSlide + 1) % slides.length;
  // 显示下一张图片
  slides[currentSlide].classList.add('active');
}, 3000);

这段代码会创建一个包含三张图片的轮播图，并且每 3 秒自动切换一次。您可以根据需要修改图片数量、轮播时间和样式。