如何用纯JavaScript实现点击导航点切换幻灯片？

没问题，咱们用纯JS来搞定这个导航点切换幻灯片的功能。先梳理下现有DOM结构：幻灯片是带.img类的图片，默认第一个通过.js-show类显示；导航点是.dots列表里的.dot元素，默认第一个用.current标记为选中状态。

直接上可运行的代码方案，我会一步步拆解逻辑：

第一步：获取核心DOM元素 #

先把需要操作的导航点和幻灯片都选中：

// 获取所有导航点节点
const dots = document.querySelectorAll('.dot');
// 获取所有幻灯片图片节点
const slides = document.querySelectorAll('.img');

第二步：绑定导航点点击事件 #

给每个导航点添加点击监听，点击时同步切换对应幻灯片和导航点状态：

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    // 1. 重置所有导航点的选中状态
    dots.forEach(d => d.classList.remove('current'));
    // 2. 标记当前点击的导航点为选中
    dot.classList.add('current');
    
    // 3. 隐藏所有幻灯片
    slides.forEach(slide => slide.classList.remove('js-show'));
    // 4. 显示对应索引的幻灯片
    slides[index].classList.add('js-show');
  });
});

代码逻辑解释 #

• querySelectorAll会返回匹配元素的集合，我们用forEach遍历集合来批量操作元素。
• 点击导航点时，先统一清除所有导航点的current选中样式，再给当前点击的导航点加上，保证视觉上的选中反馈正确。
• 幻灯片的切换逻辑同理：先隐藏所有幻灯片（移除js-show类），再给对应索引的幻灯片加上js-show类，让它显示出来。

进阶优化（可选） #

如果你的滑块已经有左右箭头切换功能，可以把切换逻辑抽成公共函数，避免重复代码：

// 封装公共切换函数
function switchToSlide(targetIndex) {
  // 更新导航点选中状态
  dots.forEach((dot, idx) => {
    dot.classList.toggle('current', idx === targetIndex);
  });
  // 更新幻灯片显示状态
  slides.forEach((slide, idx) => {
    slide.classList.toggle('js-show', idx === targetIndex);
  });
}

// 导航点点击事件调用公共函数
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => switchToSlide(index));
});

// 左右箭头也复用这个函数（示例）
let currentSlideIndex = 0;
const slideCount = slides.length;

// 下一张按钮
document.querySelector('.next').addEventListener('click', () => {
  currentSlideIndex = (currentSlideIndex + 1) % slideCount;
  switchToSlide(currentSlideIndex);
});

// 上一张按钮
document.querySelector('.prev').addEventListener('click', () => {
  currentSlideIndex = (currentSlideIndex - 1 + slideCount) % slideCount;
  switchToSlide(currentSlideIndex);
});

把这段JS代码放到页面的</body>标签之前，就能实现点击导航点切换对应幻灯片的功能了。

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