以上面的代码为基础怎么添加小圆点切换图片？

要添加小圆点切换图片，你可以按照以下步骤进行：

1. 在 HTML 中添加小圆点的标签结构，例如使用一个 div 容器包裹多个 span 标签，每个 span 标签代表一个小圆点。

<div class="dots-container">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

2. 在 CSS 中对小圆点进行样式设置，例如设置小圆点的颜色、大小等。

.dots-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

3. 在 JavaScript 中为每个小圆点添加点击事件，并在事件处理函数中切换轮播图和小圆点的激活状态。

// 获取所有小圆点元素
var dots = document.querySelectorAll('.dot');

// 定义当前轮播图和小圆点的索引
var currentSlideIndex = 0;

// 定义轮播图切换函数
function slide() {
  // 判断当前轮播图是否为最后一张，是则切换到第一张，否则切换到下一张
  if (currentSlideIndex === slides.length - 1) {
    currentSlideIndex = 0;
  } else {
    currentSlideIndex++;
  }

  // 切换轮播图和小圆点的激活状态
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
    dots[i].classList.remove('active');
  }
  slides[currentSlideIndex].style.display = 'block';
  dots[currentSlideIndex].classList.add('active');
}

// 定义小圆点点击事件处理函数
function dotClickHandler(event) {
  // 获取被点击的小圆点索引
  var dotIndex = Array.prototype.indexOf.call(dots, event.target);

  // 切换到对应的轮播图和小圆点激活状态
  currentSlideIndex = dotIndex;
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = i === currentSlideIndex ? 'block' : 'none';
    dots[i].classList.toggle('active', i === currentSlideIndex);
  }
}

// 给每个小圆点添加点击事件处理函数
for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', dotClickHandler);
}

通过以上步骤，你就可以在原来的基础上添加小圆点切换图片的功能了。