Scaling carousel缩放轮播选中div居中异常问题求解

问题根源 #

原有代码的错位问题来自两个核心错误：

1. 操作顺序错误：先修改选中类切换方块尺寸，导致布局发生偏移后再计算居中距离，计算基准已经出错
2. 偏移量采用累加逻辑，每次计算的微小误差会不断累积，多次点击后偏移会越来越严重

重构实现思路 #

• 采用索引维护选中状态，避免频繁DOM查询，状态完全可控
• 每次计算绝对偏移量，替代累加逻辑，彻底消除累计误差
• 所有尺寸通过CSS变量定义，支持动态修改，不需要调整JS逻辑
• 基于方块与选中项的距离动态计算缩放比例，天然满足越远越小的需求
• 滑动和缩放都添加过渡动画，实现流畅交互效果

完整实现代码 #

HTML #

<div class="container">
  <div class="slider">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
  </div>
  <div class="btn-wrapper">
    <button class="btn slide-left">&#8678;</button>
    <button class="btn slide-right">&#8680;</button>
  </div>
</div>

CSS #

:root {
  --square-base-size: 15vw; /* 基础尺寸，可直接修改调整大小 */
  --slider-gap: 10px; /* 方块间距，可直接修改 */
}
* {
  margin: 0;
  box-sizing: border-box;
}
body {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}
.slider {
  display: flex;
  align-items: center;
  gap: var(--slider-gap);
  transition: transform 0.3s ease;
  padding: 0 20vw; /* 两端留空，避免边缘方块缩放时被截断 */
}
.square {
  width: var(--square-base-size);
  aspect-ratio: 1 / 1;
  border: 1px solid black;
  display: grid;
  place-items: center;
  font-size: 2rem;
  transition: transform 0.3s ease;
  flex-shrink: 0; /* 禁止flex压缩方块，保证尺寸稳定 */
}
.square.selected {
  background: lightpink;
}
.btn-wrapper {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.btn {
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}

JavaScript #

const slider = document.querySelector(".slider");
const slideLeft = document.querySelector(".slide-left");
const slideRight = document.querySelector(".slide-right");
const squares = Array.from(document.querySelectorAll(".square"));
// 初始选中第三个方块，和原有逻辑一致
let currentIndex = 2;

function updateSlider() {
  // 更新所有方块的选中状态和缩放比例
  squares.forEach((square, index) => {
    const distance = Math.abs(index - currentIndex);
    square.classList.toggle("selected", distance === 0);
    // 缩放规则：选中项放大1.25倍，相邻项原尺寸，隔一个的缩小为0.8倍，可自行调整比例
    const scale = distance === 0 ? 1.25 : distance === 1 ? 1 : 0.8;
    square.style.transform = `scale(${scale})`;
  });

  // 临时移除transform，获取方块真实布局位置，保证计算基准正确
  slider.style.transform = 'none';
  const selectedSquare = squares[currentIndex];
  const selectedRect = selectedSquare.getBoundingClientRect();
  // 计算需要偏移的距离，让选中方块中心与视口中心对齐
  const targetOffset = (window.innerWidth / 2) - (selectedRect.left + selectedRect.width / 2);
  // 应用偏移
  slider.style.transform = `translateX(${targetOffset}px)`;
}

// 左右切换事件绑定
slideLeft.addEventListener('click', () => {
  if (currentIndex < squares.length - 1) {
    currentIndex++;
    updateSlider();
  }
});
slideRight.addEventListener('click', () => {
  if (currentIndex > 0) {
    currentIndex--;
    updateSlider();
  }
});

// 初始化居中
updateSlider();
// 窗口大小变化时重新居中
window.addEventListener('resize', updateSlider);

满足需求说明 #

• 方块尺寸可通过修改CSS变量--square-base-size动态调整，支持vw、px等任意单位
• 方块间距通过CSS变量--slider-gap统一设置，全程保持一致
• 方块缩放比例可在JS的updateSlider方法中自定义调整，默认已实现距离选中项越远尺寸越小的效果
• 完全原生实现，未引入任何第三方库

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