本文介绍一种通过 javascript 动态维护“视觉中心固定激活态”的横向轮播方案：无论用户点击哪个项目，始终将 `.active` 类应用在容器正中间的导航点上，并同步显示对应内容，同时支持平滑滚动与边界安全处理。
要实现“点击任意图片，激活态（.active）始终固定在中间位置，同时内容随之切换”的交互效果，核心思路是：不将 .active 绑定到被点击项，而是绑定到预设的视觉中心索引（如 5 个元素时始终是第 3 个），并通过偏移量驱动内容轮播。
关键在于解耦「UI 激活态」与「内容展示逻辑」：
- 所有 .dots 元素中，仅中间索引（Math.floor(dots.length / 2)）拥有 .active 类；
- slideIndex 不再代表当前高亮项，而是代表当前显示的内容序号；
- 点击事件传入的是相对偏移（如 -1、0、1、2），用于计算新内容索引；
- 内容切换仍由 showSlides(n) 控制，但 .active 的设置被移出循环，单独作用于中间点。
以下是优化后的完整 JS 实现（含边界保护与类名操作规范）：
let slideIndex = 3; // 初始显示第3张（1-indexed），对应中间内容
const dots = document.querySelectorAll(".dots");
const slides = document.querySelectorAll(".RSL");
const middleIndex = Math.floor(dots.length / 2); // 假设5个dots → middleIndex = 2（0-indexed）
// 初始化：显示第3张，激活中间dot
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function RSC(offset) {
const newIndex = slideIndex + offset;
// 边界校验：确保 newIndex 在有效范围内 [1, slides.length]
if (newIndex >= 1 && newIndex <= slides.length) {
// 移除所有 dots 的 active 类
dots.forEach(dot => dot.classList.remove("active"));
// 激活固定中间 dot（始终不变）
dots[middleIndex].classList.add("active");
// 更新内容显示
slideIndex = newIndex;
showSlides(slideIndex);
}
}
function showSlides(n) {
// 隐藏所有内容
slides.forEach(slide => slide.style.display = "none");
// 显示目标内容（n 是 1-indexed）
if (n >= 1 && n <= slides.length) {
slides[n - 1].style.display = "block";
}
}HTML 结构需确保每个 .RSL 包含可点击图片及对应 .dots，且 onclick 传递相对于当前项的偏移量（非目标索引）。例如：
@@##@@...@@##@@...@@##@@...@@##@@...@@##@@...
✅ 注意事项：
- .dots 必须与 .RSL 数量一致，且顺序严格对应；
- middleIndex 是静态计算值，适用于奇数个导航点；若为偶数（如 4 个），建议显式指定 middleIndex = 1 或 2 以保证视觉居中；
- 为增强体验，可添加 CSS scroll-behavior: smooth 到父容器，并用 scrollIntoView({ inline: 'center', behavior: 'smooth' }) 实现自动水平居中滚动；
- 推荐将 document.querySelectorAll 替代 getElementsByClassName，避免动态 HTMLCollection 带来的潜在问题。
该方案彻底分离了「视觉锚点」与「数据状态」，既满足 UI 上“中间恒定高亮”的设计需求，又保留了完整的内容导航能力，是构建专业级横向焦点轮播组件的可靠基础。
