求助：如何将自定义Carousel圆形指示器与对应图片关联

你需要给每个圆形指示器添加点击事件，点击时直接切换到对应索引的图片，同时同步更新激活状态。可以通过以下步骤实现：

1. 抽离重复的状态更新逻辑 #

先把你slideDown里更新图片和指示器状态的代码抽成一个独立函数，避免重复编写：

function updateCarousel(index) {
  // 移除之前元素的激活类
  bigActive.classList.remove("block");
  minActive.classList.remove("active-colonna");
  pointerActive.classList.remove("pointer-active");

  // 更新当前激活的索引和元素
  attiva = index;
  bigActive = document.getElementById("img-" + attiva);
  minActive = document.getElementById("min-" + attiva);
  pointerActive = document.getElementById("nr-" + attiva);

  // 给新元素添加激活类
  bigActive.classList.add("block");
  minActive.classList.add("active-colonna");
  pointerActive.classList.add("pointer-active");
}

2. 修改原slideDown函数复用新函数 #

调整slideDown，调用抽离后的函数简化逻辑：

function slideDown(){
  let nextIndex = attiva + 1;
  // 处理循环到第一张的情况
  if (nextIndex >= imgArray.length) {
    nextIndex = 0;
  }
  updateCarousel(nextIndex);
}

3. 给圆形指示器绑定点击事件 #

在页面加载完成后，给所有圆形指示器添加点击事件，点击时获取对应索引并更新轮播：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有id以"nr-"开头的指示器元素
  const pointers = document.querySelectorAll('[id^="nr-"]');
  
  pointers.forEach(pointer => {
    pointer.addEventListener('click', function() {
      // 从id中提取对应的图片索引（比如id="nr-3"就提取3）
      const targetIndex = parseInt(this.id.split('-')[1]);
      // 触发轮播更新
      updateCarousel(targetIndex);
    });
  });
});

这样点击任意圆形指示器，就能直接跳转到对应的图片，同时同步更新小图和指示器的激活状态。

内容的提问来源于stack exchange，提问作者g.Luke