轮播图中的圆点样式怎么随着图片的切换而变化

实现轮播图中圆点随着图片切换而变化，可以通过以下步骤实现：

1. 在 HTML 中添加圆点元素，并为每个圆点添加一个 class，用于控制其样式。

2. 使用 JavaScript 监听轮播图的切换事件，当切换到新的图片时，获取当前图片的索引。

3. 使用 JavaScript 获取圆点元素的 NodeList 对象，并遍历其中的每个圆点元素。

4. 在遍历过程中，判断当前圆点是否对应当前图片的索引，如果是，则为其添加一个 active class，否则移除 active class。

5. 在 CSS 中定义 active class 的样式，用于区分当前圆点与其他圆点的样式区别。

示例代码如下：

HTML:

<div class="slideshow">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS:

.slideshow {
  position: relative;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slides img {
  width: 100%;
  height: auto;
}

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

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

.dot.active {
  background-color: #f00;
}

JavaScript:

const slides = document.querySelector('.slides');
const dots = document.querySelectorAll('.dot');

let currentSlideIndex = 0;

function showSlide(slideIndex) {
  slides.style.transform = `translateX(-${slideIndex * 100}%)`;
}

function setActiveDot(dotIndex) {
  dots.forEach((dot, index) => {
    if (index === dotIndex) {
      dot.classList.add('active');
    } else {
      dot.classList.remove('active');
    }
  });
}

function nextSlide() {
  currentSlideIndex++;
  if (currentSlideIndex >= dots.length) {
    currentSlideIndex = 0;
  }
  showSlide(currentSlideIndex);
  setActiveDot(currentSlideIndex);
}

// 监听轮播图的切换事件
setInterval(nextSlide, 3000);