简单的自动轮播图带小圆圈js

以下是一个简单的自动轮播图带小圆圈的 JS 代码：

// 获取轮播图、小圆圈、左右箭头等元素
var slider = document.querySelector('.slider');
var slides = slider.querySelectorAll('.slide');
var dots = slider.querySelectorAll('.dot');
var prevBtn = slider.querySelector('.prev');
var nextBtn = slider.querySelector('.next');

// 定义变量
var currentIndex = 0;
var timer = null;

// 显示当前图片和小圆圈
function showSlide(index) {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
    dots[i].classList.remove('active');
  }
  slides[index].classList.add('active');
  dots[index].classList.add('active');
}

// 切换到下一张图片
function nextSlide() {
  currentIndex++;
  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }
  showSlide(currentIndex);
}

// 切换到上一张图片
function prevSlide() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = slides.length - 1;
  }
  showSlide(currentIndex);
}

// 自动播放
function autoPlay() {
  timer = setInterval(function() {
    nextSlide();
  }, 3000);
}

// 点击小圆圈切换到对应的图片
function dotClick() {
  var index = Array.prototype.indexOf.call(dots, this);
  currentIndex = index;
  showSlide(currentIndex);
}

// 绑定事件
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
dots.forEach(function(dot) {
  dot.addEventListener('click', dotClick);
});

// 开始自动播放
autoPlay();

在 HTML 中，需要按照以下结构来构建轮播图：

<div class="slider">
  <div class="slides">
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    ...
  </div>
  <div class="dots">
    <div class="dot active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    ...
  </div>
  <button class="prev"></button>
  <button class="next"></button>
</div>

其中，`.slide` 表示轮播图的每一张图片，`.dot` 表示小圆圈，`.prev` 和 `.next` 分别表示左右箭头。`.active` 表示当前显示的图片和小圆圈。