如何用jQuery实现三个盒子的循环位置切换动画？

嘿，我来帮你搞定这个图片画廊的循环切换功能！咱们先明确需求逻辑，再一步步实现完整的代码：

核心交互逻辑 #

• 点击区域右侧：右侧盒子移至中间位置，中间盒子移至左侧位置，左侧盒子移至右侧位置
• 点击区域左侧：左侧盒子移至中间位置，中间盒子移至右侧位置，右侧盒子移至左侧位置

下面是完整的HTML、CSS和JavaScript实现：

HTML结构 #

我们用容器包裹三个盒子，同时支持按钮点击或区域点击触发切换（这里先提供按钮版，后面附区域点击的改造方案）：

<div class="gallery-container">
  <button class="nav-btn left-nav">←</button>
  <div class="box-group">
    <div class="box left">Box 1</div>
    <div class="box middle">Box 2</div>
    <div class="box right">Box 3</div>
  </div>
  <button class="nav-btn right-nav">→</button>
</div>

CSS样式 #

给盒子设置差异化的视觉样式（模拟画廊聚焦效果），同时添加过渡动画让切换更平滑：

.gallery-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 60px;
}

.box-group {
  display: flex;
  gap: 12px;
}

.box {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* 位置对应的样式 */
.left {
  background-color: #ff6b6b;
  transform: scale(0.85);
}

.middle {
  background-color: #4ecdc4;
  transform: scale(1.15);
  z-index: 10;
}

.right {
  background-color: #45b7d1;
  transform: scale(0.85);
}

.nav-btn {
  font-size: 28px;
  padding: 10px 18px;
  border: none;
  background-color: #2d3436;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
}

.nav-btn:hover {
  background-color: #4a4e69;
}

JavaScript逻辑 #

核心是跟踪每个盒子的位置状态，点击时更新位置类实现循环切换：

// 获取DOM元素
const boxes = document.querySelectorAll('.box');
const leftBtn = document.querySelector('.left-nav');
const rightBtn = document.querySelector('.right-nav');

// 记录三个盒子当前的位置类（初始顺序对应三个盒子的位置）
let currentPositions = ['left', 'middle', 'right'];

// 右侧点击逻辑：按需求切换位置
rightBtn.addEventListener('click', () => {
  // 新位置顺序：原中间 → 左，原右侧 → 中间，原左侧 → 右侧
  const newPositions = [currentPositions[1], currentPositions[2], currentPositions[0]];
  updateBoxPositions(newPositions);
});

// 左侧点击逻辑：按需求切换位置
leftBtn.addEventListener('click', () => {
  // 新位置顺序：原右侧 → 左，原左侧 → 中间，原中间 → 右侧
  const newPositions = [currentPositions[2], currentPositions[0], currentPositions[1]];
  updateBoxPositions(newPositions);
});

// 通用更新盒子位置的函数
function updateBoxPositions(newPositions) {
  boxes.forEach((box, index) => {
    // 移除旧位置类，添加新位置类
    box.classList.remove(currentPositions[index]);
    box.classList.add(newPositions[index]);
  });
  // 更新位置记录数组
  currentPositions = newPositions;
}

进阶：改成点击区域左右侧触发 #

如果不想用按钮，想通过点击容器的左右区域触发切换，可以把上面的按钮点击逻辑替换成下面的代码：

const galleryContainer = document.querySelector('.gallery-container');

galleryContainer.addEventListener('click', (e) => {
  const containerRect = galleryContainer.getBoundingClientRect();
  const clickX = e.clientX - containerRect.left;
  const midLine = containerRect.width / 2;

  if (clickX < midLine) {
    // 点击左侧区域，执行左切换逻辑
    const newPositions = [currentPositions[2], currentPositions[0], currentPositions[1]];
    updateBoxPositions(newPositions);
  } else {
    // 点击右侧区域，执行右切换逻辑
    const newPositions = [currentPositions[1], currentPositions[2], currentPositions[0]];
    updateBoxPositions(newPositions);
  }
});

最后，你只需要把盒子里的文字替换成<img>标签，就能直接变成图片画廊啦！

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