如何实现点击切换堆叠图片的图片画廊效果？

你的当前代码仅给点击的图片设置z-index:100，但因为只有顶层图片能被点击，每次操作都是给顶层图片叠加更高层级，无法切换到底下的图片，自然达不到预期效果。以下是两种可行的解决方案：

方法一：通过调整DOM顺序实现切换 #

绝对定位的元素在未设置z-index时，DOM顺序越靠后，层级越高。因此只需在点击顶层图片时，将它移到父元素的最前面，原本在它下方的图片就会自动成为新的顶层。

修改JS代码如下：

const images = document.querySelectorAll('.img-stack img');

images.forEach(img => {
  img.addEventListener('click', function() {
    // 将当前点击的图片移到父元素的最前面
    this.parentElement.prepend(this);
  });
});

这种方法无需修改CSS，逻辑简单直观，完全匹配你“点击顶层图片，切换下方图片到顶层”的需求。

方法二：通过控制z-index实现切换 #

如果你更倾向于用z-index管理层级，可以先给每张图片设置初始层级，再在点击时调整：

1. 给CSS添加初始z-index：

main .img-container .img-stack img:nth-child(1) {
  width: 300px;
  height: 400px;
  background-color: skyblue;
  transform: rotate(-6deg);
  z-index: 1; /* 初始层级 */
}
main .img-container .img-stack img:nth-child(2) {
  width: 300px;
  height: 400px;
  background-color: coral;
  transform: rotate(9deg);
  z-index: 2; /* 初始层级 */
}
main .img-container .img-stack img:nth-child(3) {
  width: 300px;
  height: 400px;
  background-color: crimson;
  transform: rotate(3deg);
  z-index: 3; /* 初始层级 */
}

2. 修改JS代码，点击顶层图片时将其层级设为最低：

const images = document.querySelectorAll('.img-stack img');

images.forEach(img => {
  img.addEventListener('click', function() {
    // 获取所有图片的当前z-index值（转为数字）
    const allZIndices = Array.from(images).map(item => {
      return parseInt(item.style.zIndex || window.getComputedStyle(item).zIndex);
    });
    const maxZ = Math.max(...allZIndices);
    const minZ = Math.min(...allZIndices);
    
    // 判断当前点击的是顶层图片
    if (parseInt(this.style.zIndex || window.getComputedStyle(this).zIndex) === maxZ) {
      // 将它的z-index设为比最低值还小，让它跑到最下面
      this.style.zIndex = minZ - 1;
    }
  });
});

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