JS点击图片堆叠div实现：初始专属图选中选项后不可复现

之前通过设置低z-index实现初始图时出现缩放异常，核心原因是初始图样式和动态生成的预览图规则不统一、原代码存在变量重复声明导致的层级计数错误，按以下方式修改即可稳定实现需求：

• 新增点击状态标记，记录用户是否操作过选择器
• 页面加载完成时插入初始预览图，样式和后续动态生成的图片完全保持一致，避免渲染错位
• 用户第一次点击任意选择器选项时，直接从DOM中移除初始图，后续操作不会再触发初始图渲染，完全满足「点击后无法再查看初始图」的要求
• 修复原代码中counter变量重复声明、类型错误的bug，避免z-index层级混乱

效果参考 #

• 页面初始加载状态：
  
• 点击选择器后的状态：
  

完整修改后代码 #

JavaScript部分 #

var preview = document.querySelector('.preview'),
counter = 1,
picture = '',
hasClickedSelector = false;
// 替换为你需要的初始预览图地址，该图不会出现在下方选择器中
const initialImgSrc = 'https://via.placeholder.com/350.jpg/CCCCCC';

// 页面DOM加载完成后插入初始预览图
window.addEventListener('DOMContentLoaded', () => {
  const initialImg = document.createElement('img');
  initialImg.src = initialImgSrc;
  // 初始图样式和动态生成的预览图完全统一，避免缩放/错位
  initialImg.style.position = 'absolute';
  initialImg.style.top = '50%';
  initialImg.style.left = '50%';
  initialImg.style.transform = 'translate(-50%, -50%) rotate(0deg)';
  initialImg.style.zIndex = 0;
  initialImg.classList.add('initial-preview-img');
  preview.appendChild(initialImg);
})

function addRed() {
  picture = 'red';
  addPicture();
}

function addGreen() {
  picture = 'green';
  addPicture();
}

function addBlue() {
  picture = 'blue';
  addPicture();
}

function addYellow() {
  picture = 'yellow';
  addPicture();
}

function addPicture() {
  // 首次点击选择器时移除初始图，锁定标记位
  if (!hasClickedSelector) {
    const initialImg = document.querySelector('.initial-preview-img');
    if (initialImg) {
      initialImg.remove();
    }
    hasClickedSelector = true;
  }

  var img = document.createElement('img'),
      rotation = Math.round(Math.random() * 40 - 20);
  switch (picture) {
    case 'red':
      img.src = 'https://via.placeholder.com/350.jpg/FF0000';
      break;
    case 'green':
      img.src = 'https://via.placeholder.com/350.jpg/00FF00';
      break;
    case 'blue':
      img.src = 'https://via.placeholder.com/350.jpg/0000FF';
      break;
    case 'yellow':
      img.src = 'https://via.placeholder.com/350.jpg/FFFF00';
      break;
  }
  img.style.position = 'absolute';
  img.style.top = '50%';
  img.style.left = '50%';
  img.style.transform = 'translate(-50%, -50%) rotate(' + rotation + 'deg)';
  img.style.zIndex = counter;  
  preview.appendChild(img);
  
  counter = counter + 1;
}

HTML部分（原有结构无需改动） #

<div class="container">
  <div class="preview"></div>
  <div class="selector"><img src="https://via.placeholder.com/100.jpg/FF0000" onclick="addRed()"></div>
  <div class="selector"><img src="https://via.placeholder.com/100.jpg/00FF00" onclick="addGreen()"></div>
  <div class="selector"><img src="https://via.placeholder.com/100.jpg/0000FF" onclick="addBlue()"></div>
  <div class="selector"><img src="https://via.placeholder.com/100.jpg/FFFF00" onclick="addYellow()"></div>
</div>

CSS部分（新增预览图通用尺寸规则，彻底解决缩放异常） #

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.preview {
  grid-column: 1 / -1;
  aspect-ratio: 1 / 1;
  position: relative;
}

/* 统一所有预览图的尺寸规则，避免缩放错位 */
.preview img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.selector {
  padding: 10px;
}

.selector > img {
  display: block;
  object-fit: contain;
  width: 100%;
  cursor: pointer;
}

如果需要初始图也带随机旋转角度，直接把初始图transform属性里的rotate(0deg)替换为和动态图一致的随机角度计算逻辑即可，不会影响功能。

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