写一个间隔为两秒带小圆圈翻页的轮播图

好的，以下是一个简单的实现：

HTML代码：

<div class="slider">
  <div class="slide active">
    <img src="slide1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="slide2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
  <div class="slide">
    <img src="slide4.jpg" alt="Slide 4">
  </div>
  <div class="slide">
    <img src="slide5.jpg" alt="Slide 5">
  </div>
</div>

CSS代码：

.slider {
  position: relative;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide.active {
  opacity: 1;
}
.slide img {
  width: 100%;
  height: auto;
}
.pagination {
  text-align: center;
  margin-top: 20px;
}
.pagination span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
  cursor: pointer;
}
.pagination span.active {
  background-color: #333;
}

JavaScript代码：

var currentSlide = 0;
var slides = document.querySelectorAll('.slide');
var dots = document.querySelectorAll('.pagination span');

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

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

dots.forEach(function(dot, index) {
  dot.addEventListener('click', function() {
    showSlide(index);
  });
});

showSlide(0);
setInterval(nextSlide, 2000);

这个轮播图包含了一个 `slider` 容器，内部包含多个 `slide` 元素和一个 `pagination` 元素。每个 `slide` 元素包含一个图片，通过修改 `opacity` 属性来实现淡入淡出的效果。`pagination` 元素包含多个小圆圈，点击小圆圈可以切换到对应的图片。

在 JavaScript 中，我们定义了两个函数：`showSlide` 和 `nextSlide`。`showSlide` 函数用于显示指定的 `slide`，并且将对应的小圆圈设置为激活状态。`nextSlide` 函数用于切换到下一张图片。我们通过调用 `showSlide` 和 `setInterval` 来实现自动翻页的效果。