实现Div横向滚动时的当前图片指示功能（附参考代码）

下面是适配横向滚动场景的完整实现代码，包含HTML、CSS和JavaScript，实现滚动时用圆点标识当前显示的图片：

HTML结构 #

<!-- 横向滚动容器 -->
<div class="horizontal-scroll-container" id="scrollContainer">
  <div class="scroll-content">
    <img src="图片1地址" alt="图片1" class="scroll-img">
    <img src="图片2地址" alt="图片2" class="scroll-img">
    <img src="图片3地址" alt="图片3" class="scroll-img">
    <img src="图片4地址" alt="图片4" class="scroll-img">
  </div>
</div>

<!-- 导航圆点 -->
<div class="dot-container" id="dotContainer">
  <span class="dot active"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

CSS样式 #

/* 横向滚动容器样式 */
.horizontal-scroll-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 20px;
  /* 隐藏滚动条（可选） */
  scrollbar-width: none;
}
.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-content {
  display: inline-block;
}

.scroll-img {
  width: 100vw; /* 每张图片占满视口宽度 */
  height: auto;
  display: inline-block;
}

/* 导航圆点样式 */
.dot-container {
  text-align: center;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #333; /* 激活状态的圆点颜色 */
}

JavaScript逻辑 #

const scrollContainer = document.getElementById('scrollContainer');
const dots = document.querySelectorAll('.dot');
const imgWidth = document.querySelector('.scroll-img').offsetWidth;

// 监听横向滚动事件
scrollContainer.onscroll = function() {
  updateActiveDot();
};

// 更新激活的圆点
function updateActiveDot() {
  // 计算当前滚动位置对应的图片索引
  const scrollLeft = scrollContainer.scrollLeft;
  const currentIndex = Math.round(scrollLeft / imgWidth);
  
  // 移除所有圆点的激活类
  dots.forEach(dot => dot.classList.remove('active'));
  // 给当前索引的圆点添加激活类
  if (currentIndex >= 0 && currentIndex < dots.length) {
    dots[currentIndex].classList.add('active');
  }
}

// 点击圆点跳转到对应图片
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    scrollContainer.scrollTo({
      left: index * imgWidth,
      behavior: 'smooth' // 平滑滚动（可选）
    });
  });
});

关键修改说明 #

对比你提供的纵向滚动代码，核心区别在于：

1. 监听对象：不再监听window的滚动，而是监听横向滚动容器的scroll事件，使用scrollLeft（横向滚动距离）替代scrollTop（纵向滚动距离）。
2. 位置计算：根据每张图片的宽度，计算滚动距离对应的图片索引，从而确定哪个圆点需要激活。
3. 交互增强：额外添加了点击圆点跳转对应图片的功能，提升用户体验。

内容的提问来源于stack exchange，提问作者Jirkaon