动态图片画廊背景色切换教程

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;

images.forEach((item, i) => {
  item.addEventListener('click', () => setPopupImage(i));
});

const updateImage = (i) => {
  let path = `img/img${i + 1}.png`;
  largeImage.src = path;
  imageName.innerHTML = path;
  imageIndex.innerHTML = `0${i + 1}`;
  index = i;
  // 可以在这里调用一个函数来根据当前图片索引设置背景色
  setRandomBackgroundColor(); // 或者 setBackgroundColorByIndex(i);
};

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

leftArrow.addEventListener('click', () => {
  if (index > 0) {
    updateImage(index - 1);
    // 直接设置背景色
    // popup.style.background = "green"; // 示例：固定颜色
  }
});

rightArrow.addEventListener('click', () => {
  if (index < images.length - 1) {
    updateImage(index + 1);
    // 直接设置背景色
    // popup.style.background = "blue"; // 示例：固定颜色
  }
});

const setPopupImage = (i) => {
  popup.classList.toggle('active');
  updateImage(i); // 确保在打开弹出层时也更新图片和背景色
};

// 初始调用，确保弹出层打开时显示第一张图片
// setPopupImage(0); // 这行代码可能导致弹出层在页面加载时就激活，根据需求决定是否保留。

// 示例：定义一个颜色数组，根据图片索引切换背景色
const backgroundColors = [
  'lightcoral', 'lightblue', 'lightgreen', 'lightgoldenrodyellow', 'lightpink', 'lightskyblue'
];

// 优化：创建一个函数来动态设置背景色
const setBackgroundColor = (imageIndex) => {
  const color = backgroundColors[imageIndex % backgroundColors.length];
  popup.style.background = color;
};

// 将背景色设置逻辑集成到 updateImage 函数中
const updateImageAndBackground = (i) => {
  let path = `img/img${i + 1}.png`;
  largeImage.src = path;
  imageName.innerHTML = path;
  imageIndex.innerHTML = `0${i + 1}`;
  index = i;
  setBackgroundColor(i); // 调用设置背景色的函数
};

// 更新事件监听器以使用新的函数
leftArrow.addEventListener('click', () => {
  if (index > 0) {
    updateImageAndBackground(index - 1);
  }
});

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

// 当点击缩略图打开弹出层时
images.forEach((item, i) => {
  item.addEventListener('click', () => {
    popup.classList.add('active'); // 确保弹出层激活
    updateImageAndBackground(i); // 更新图片和背景色
  });
});

// 确保关闭按钮功能正常
closeBtn.addEventListener('click', () => {
  popup.classList.remove('active'); // 移除active类来关闭
});

// 初始加载时设置第一张图的背景色 (如果需要)
// updateImageAndBackground(0); // 如果希望在弹出层打开时才设置，则不需要在全局作用域调用