如何为图片画廊中的每张图片设置动态弹窗背景色

// index.js

// ... (现有代码，例如获取DOM元素) ...

let index = 0; // will track our current image;

// 定义每张图片对应的背景颜色数组
const backgroundColors = [
    '#FFC0CB', // 图片1的背景色 (例如：浅粉色)
    '#ADD8E6', // 图片2的背景色 (例如：浅蓝色)
    '#90EE90', // 图片3的背景色 (例如：浅绿色)
    '#FFD700', // 图片4的背景色 (例如：金色)
    '#DA70D6', // 图片5的背景色 (例如：兰花紫)
    '#FFA07A'  // 图片6的背景色 (例如：浅橙色)
];

// ... (现有代码，例如forEach循环) ...

// index.js

// ... (现有代码) ...

const updateImage = (i) => {
    let path = `img/img${i+1}.png`;
    largeImage.src = path;
    imageName.innerHTML = path;
    imageIndex.innerHTML = `0${i+1}`;
    index = i; // 更新当前图片索引

    // 根据索引设置弹窗背景色
    if (backgroundColors[index]) {
        popup.style.backgroundColor = backgroundColors[index];
    } else {
        // 如果索引超出预设范围，可以设置一个默认颜色
        popup.style.backgroundColor = '#333'; // 默认深灰色
    }
}

// ... (现有代码，例如关闭按钮和箭头点击事件) ...

/* style.css */

.popup{
  position: fixed;
  /* ... 其他样式 ... */
  /* background:  pink;  <-- 移除或注释掉此行 */
  background:  #333; /* 可以设置为一个默认的暗色，或者直接不设置 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  overflow: hidden;
  transition: 1s; /* 可以添加 background-color 的过渡效果 */
  opacity: 0;
}

.popup{
  /* ... 其他样式 ... */
  transition: transform 1s, opacity 1s, background-color 0.5s ease; /* 添加 background-color 过渡 */
}

// index.js
const images = [...document.querySelectorAll('.image')];
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');

let index = 0; // will track our current image;

// 定义每张图片对应的背景颜色数组
const backgroundColors = [
    '#FFC0CB', // 图片1的背景色 (浅粉色)
    '#ADD8E6', // 图片2的背景色 (浅蓝色)
    '#90EE90', // 图片3的背景色 (浅绿色)
    '#FFD700', // 图片4的背景色 (金色)
    '#DA70D6', // 图片5的背景色 (兰花紫)
    '#FFA07A'  // 图片6的背景色 (浅橙色)
];

images.forEach((item, i) => {
    item.addEventListener('click', () => {
        updateImage(i); // 先更新图片和背景色
        popup.classList.toggle('active'); // 再激活弹窗
    })
})

const updateImage = (i) => {
    let path = `img/img${i+1}.png`;
    largeImage.src = path;
    imageName.innerHTML = path;
    imageIndex.innerHTML = `0${i+1}`;
    index = i; // 更新当前图片索引

    // 根据索引设置弹窗背景色
    if (backgroundColors[index]) {
        popup.style.backgroundColor = backgroundColors[index];
    } else {
        // 如果索引超出范围，设置一个默认颜色
        popup.style.backgroundColor = '#333'; // 默认深灰色
    }
}

closeBtn.addEventListener('click', () => {
    popup.classList.toggle('active');
})

leftArrow.addEventListener('click', () => {
    if(index > 0){
        updateImage(index - 1);
    }
})

rightArrow.addEventListener('click', () => {
    if(index < images.length - 1){
        updateImage(index + 1);
    }
})

// 原代码中的 setPopupImage(0); 可能会导致弹窗在加载时短暂可见，且没有背景色。
// 建议移除，因为点击缩略图时会正确调用 updateImage。
// 如果需要初始显示，应确保在调用 popup.classList.toggle('active') 之前调用 updateImage(0)。
// const setPopupImage = index => { popup.classList.toggle('active'); }
// setPopupImage(0);