堆叠卡片轮播：使用jQuery实现z-index循环切换

核心思路 #

不用硬编码每个z-index的切换规则，而是通过收集当前层级→排序→重新分配的方式实现循环，这样不管卡片数量增减都能适配。核心逻辑是：将最上层（z-index最高）的卡片移到最底层，其余卡片层级依次提升一级。

完整实现代码 #

HTML（优化后，移除内联样式，用CSS统一管理）

<div class="container">
  <div class="card active" data-z="4">1</div>
  <div class="card" data-z="3">2</div>
  <div class="card" data-z="2">3</div>
  <div class="card" data-z="1">4</div>
</div>
<button class="toggle-btn">切换卡片</button>

CSS（添加基础样式和切换动画）

.container {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 20px auto;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  transition: all 0.5s ease;
  /* 初始偏移，模拟堆叠效果 */
  transform: translateY(0);
}

.card.active {
  background: orange;
}
.card:nth-child(2) { background: tan; }
.card:nth-child(3) { background: pink; }
.card:nth-child(4) { background: blue; }

/* 切换动画：最上层卡片向下移出，其他卡片上移 */
.card.move-down {
  transform: translateY(100%);
  opacity: 0;
}
.card.move-up {
  transform: translateY(0);
  opacity: 1;
}

jQuery 代码（实现z-index循环切换）

$('.toggle-btn').click(function() {
  // 1. 获取所有卡片，按data-z降序排序
  let cards = $('.card').sort((a, b) => {
    return parseInt($(b).data('z')) - parseInt($(a).data('z'));
  });

  // 2. 保存所有当前层级值
  let zIndexes = cards.map(function() {
    return parseInt($(this).data('z'));
  }).get();

  // 3. 重新分配层级：最上层设为最低，其余依次+1
  cards.each(function(index) {
    if (index === 0) {
      // 原最高层级的卡片，设为最低值
      $(this).data('z', 1).css('z-index', 1);
      // 添加向下动画类
      $(this).addClass('move-down').removeClass('active');
    } else {
      // 其余卡片层级提升一级
      let newZ = zIndexes[index - 1];
      $(this).data('z', newZ).css('z-index', newZ);
      // 添加向上动画类
      $(this).addClass('move-up');
      // 第二个卡片变为新的active
      if (index === 1) {
        $(this).addClass('active');
      }
    }
  });

  // 动画结束后移除动画类，重置状态
  setTimeout(() => {
    $('.card').removeClass('move-down move-up');
  }, 500);
});

逻辑解释 #

1. 排序卡片：通过data-z属性（也可以直接读取css('z-index')）将卡片按层级从高到低排序，确保能准确拿到最上层的卡片。
2. 收集层级值：把当前所有卡片的层级存到数组里，方便后续重新分配。
3. 重新分配层级：
   • 第一个（原最高层）卡片的层级设为1（最底层）
   • 后面的每个卡片，层级设为前一个卡片的原层级，实现“上移一级”
4. 动画增强：通过添加CSS过渡类，让切换过程更流畅，提升用户体验。

简化版（直接操作z-index，不用data属性） #

如果不想用data-z，可以直接读取元素的z-index值：

$('.toggle-btn').click(function() {
  let cards = $('.card').sort((a, b) => {
    return parseInt($(b).css('z-index')) - parseInt($(a).css('z-index'));
  });

  // 先把非最高层的卡片层级+1
  cards.slice(1).each(function() {
    let currentZ = parseInt($(this).css('z-index'));
    $(this).css('z-index', currentZ + 1);
  });

  // 再把最高层的卡片设为最低层级
  cards.first().css('z-index', 1);

  // 切换active类
  cards.first().removeClass('active');
  cards.eq(1).addClass('active');
});

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