如何将老虎机效果中的文本元素替换为图片

嘿，这个需求其实很好解决～你之前直接插HTML显示成文本，是因为原来的代码用了textContent来设置内容，它会把所有内容都当成纯文本解析，不会渲染HTML。咱们只需要改两处地方就能换成图片，我一步步给你讲：

第一步：把数字数组换成你的图片路径 #

原来的items数组存的是1-12的字符串，现在直接替换成你要用到的图片URL就行，比如本地的img1.jpg或者在线图片链接：

const items = [
  'img1.jpg',
  'img2.jpg',
  'img3.jpg',
  'img4.jpg',
  'img5.jpg',
  'img6.jpg',
  'img7.jpg',
  'img8.jpg',
  'img9.jpg',
  'img10.jpg',
  'img11.jpg',
  'img12.jpg',
];

第二步：修改盒子内容的渲染逻辑 #

原来的代码是给盒子设置textContent，现在我们要改成：如果是初始的❓就保留文本，否则创建<img>元素插入到盒子里，还要确保图片能填满老虎机的盒子。找到创建box的那段代码，替换掉box.textContent = pool[i];的部分：

for (let i = pool.length - 1; i >= 0; i--) {
  const box = document.createElement('div');
  box.classList.add('box');
  box.style.width = door.clientWidth + 'px';
  box.style.height = door.clientHeight + 'px';
  
  // 这里是修改的核心：根据内容类型渲染文本或图片
  if (pool[i] === '❓') {
    box.textContent = pool[i];
  } else {
    const img = document.createElement('img');
    img.src = pool[i];
    // 设置图片样式，让它填满整个老虎机盒子
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.objectFit = 'cover'; // 保持图片比例，不会拉伸变形
    box.appendChild(img);
  }
  
  boxesClone.appendChild(box);
}

（可选）优化CSS让图片显示更完美 #

如果你的老虎机盒子有固定尺寸，建议给.box加个overflow: hidden;，避免图片超出边界：

.box {
  /* 原来的样式保持不变，新增下面这行 */
  overflow: hidden;
}

修改后的完整代码 #

(function () {
  // 替换成你的图片路径
  const items = [
    'img1.jpg',
    'img2.jpg',
    'img3.jpg',    
    'img4.jpg',
    'img5.jpg',
    'img6.jpg',
    'img7.jpg',
    'img8.jpg',
    'img9.jpg',
    'img10.jpg',
    'img11.jpg',
    'img12.jpg',
  ];
  const doors = document.querySelectorAll('.door');
  
  document.querySelector('#spinner').addEventListener('click', spin);
  document.querySelector('#reseter').addEventListener('click', init);

  function init(firstInit = true, groups = 1, duration = 1) {
    for (const door of doors) {
      if (firstInit) {
        door.dataset.spinned = '0';
      } else if (door.dataset.spinned === '1') {
        return;
      }

      const boxes = door.querySelector('.boxes');
      const boxesClone = boxes.cloneNode(false);
      const pool = ['❓'];

      if (!firstInit) {
        const arr = [];
        for (let n = 0; n < (groups > 0 ? groups : 1); n++) {
          arr.push(...items);
        }
        pool.push(...shuffle(arr));

        boxesClone.addEventListener(
          'transitionstart',
          function () {
            door.dataset.spinned = '1';
            this.querySelectorAll('.box').forEach((box) => {
              box.style.filter = 'blur(1px)';
            });
          },
          { once: true }
        );

        boxesClone.addEventListener(
          'transitionend',
          function () {
            this.querySelectorAll('.box').forEach((box, index) => {
              box.style.filter = 'blur(0)';
              if (index > 0) this.removeChild(box);
            });
          },
          { once: true }
        );
      }

      for (let i = pool.length - 1; i >= 0; i--) {
        const box = document.createElement('div');
        box.classList.add('box');
        box.style.width = door.clientWidth + 'px';
        box.style.height = door.clientHeight + 'px';
        
        // 渲染图片或文本的逻辑
        if (pool[i] === '❓') {
          box.textContent = pool[i];
        } else {
          const img = document.createElement('img');
          img.src = pool[i];
          img.style.width = '100%';
          img.style.height = '100%';
          img.style.objectFit = 'cover';
          box.appendChild(img);
        }
        
        boxesClone.appendChild(box);
      }
      boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`;
      boxesClone.style.transform = `translateY(-${door.clientHeight * (pool.length - 1)}px)`;
      door.replaceChild(boxesClone, boxes);
    }
  }

  async function spin() {
    init(false, 1, 2);
    
    for (const door of doors) {
      const boxes = door.querySelector('.boxes');
      const duration = parseInt(boxes.style.transitionDuration);
      boxes.style.transform = 'translateY(0)';
      await new Promise((resolve) => setTimeout(resolve, duration * 100));
    }
  }

  function shuffle([...arr]) {
    let m = arr.length;
    while (m) {
      const i = Math.floor(Math.random() * m--);
      [arr[m], arr[i]] = [arr[i], arr[m]];
    }
    return arr;
  }

  init();
})();

这样改完之后，老虎机滚动的就会是你设置的图片了～如果连初始的❓也想换成图片，只需要把pool = ['❓']改成pool = ['default-question.jpg']，然后去掉渲染逻辑里的if判断，统一用图片渲染就行。

备注：内容来源于stack exchange，提问作者Doctor Chickles