写一个自动轮播带小圆圈的轮播图

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

HTML部分：

<div class="slider">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="slider-nav">
    <span class="slider-dot active"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

CSS部分：

.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.slider-wrapper {
  position: absolute;
  width: 300%;
  height: 100%;
  transition: left .6s ease-in-out;
}
.slider-wrapper img {
  float: left;
  width: 33.3333%;
  height: 100%;
}
.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color .3s ease;
}
.slider-dot.active {
  background-color: #333;
}

JavaScript部分：

const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderImgs = sliderWrapper.querySelectorAll('img');
const sliderNav = document.querySelector('.slider-nav');
const sliderDots = sliderNav.querySelectorAll('.slider-dot');

let curSlide = 0; // 当前显示的图片的索引
let autoSlide; // 自动轮播的定时器

// 切换到指定索引的图片
function slideTo(index) {
  curSlide = index;
  sliderWrapper.style.left = -curSlide * 100 / sliderImgs.length + '%';
  sliderDots.forEach((dot, i) => {
    dot.classList.toggle('active', i === curSlide);
  });
}

// 切换到下一张图片
function slideNext() {
  slideTo((curSlide + 1) % sliderImgs.length);
}

// 自动轮播
function autoSlideStart() {
  autoSlide = setInterval(slideNext, 3000);
}

// 停止自动轮播
function autoSlideStop() {
  clearInterval(autoSlide);
}

// 点击小圆圈切换到对应的图片
sliderDots.forEach((dot, i) => {
  dot.addEventListener('click', () => {
    slideTo(i);
    autoSlideStop();
  });
});

// 鼠标移入停止自动轮播，移出恢复自动轮播
sliderWrapper.addEventListener('mouseenter', autoSlideStop);
sliderWrapper.addEventListener('mouseleave', autoSlideStart);

// 开始自动轮播
autoSlideStart();

代码解释：

1. HTML部分包含一个 `.slider` 容器，其中包含一个 `.slider-wrapper` 容器用于包裹所有图片，以及一个 `.slider-nav` 容器用于放置小圆圈。
2. CSS部分使用绝对定位将 `.slider-wrapper` 容器定位到 `.slider` 容器的左侧，同时将其宽度设置为三倍，每张图片占据一个三分之一的宽度，通过 `left` 属性控制 `.slider-wrapper` 容器的位置来切换图片。`.slider-nav` 容器使用 flex 布局将小圆圈水平居中，同时使用 `transform` 属性将其水平居中。
3. JavaScript部分定义了三个函数，分别是 `slideTo`、`slideNext` 和 `autoSlideStart`。`slideTo` 函数用于切换到指定索引的图片，通过修改 `.slider-wrapper` 容器的 `left` 属性来实现切换。`slideNext` 函数用于切换到下一张图片，通过 `curSlide + 1` 模图片数量来实现循环轮播。`autoSlideStart` 函数用于开始自动轮播，使用 `setInterval` 函数定时调用 `slideNext` 函数。
4. 在代码中监听小圆圈的 `click` 事件，当点击小圆圈时，调用 `slideTo` 函数切换到对应的图片，并调用 `autoSlideStop` 函数停止自动轮播。
5. 在代码中监听 `.slider` 容器的 `mouseenter` 和 `mouseleave` 事件，当鼠标移入容器时，调用 `autoSlideStop` 函数停止自动轮播，当鼠标移出容器时，调用 `autoSlideStart` 函数恢复自动轮播。
6. 最后调用 `autoSlideStart` 函数开始自动轮播。

以上是一个简单的自动轮播带小圆圈的轮播图的代码实现，你可以根据需要进行修改和优化。