动态修改图片画廊弹出层背景色的教程

<div class="popup">
    <div class="top-bar">
        <p class="image-name">img1.png</p>
        <span class="close-btn">
            @@##@@
        </span>
    </div>
    <button class="arrow-btn left-arrow">@@##@@</button>
    <button class="arrow-btn right-arrow">@@##@@</button>
    @@##@@
    <h1 class="index">01</h1>
</div>
<!-- ... 其他画廊内容 ... -->

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100vw;
  height: 100vh;
  background: lightgreen; /* 初始背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  overflow: hidden;
  transition: 1s; /* 现有过渡效果，可以进一步细化 */
  opacity: 0;
  /* 添加背景色过渡效果，使颜色变化更平滑 */
  transition: background 0.8s ease-in-out, transform 1s, opacity 1s;
}

.popup.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

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; // 当前图片索引

// 定义一组背景颜色，可以根据需要添加更多颜色
const backgroundColors = [
  '#ff7a2d', // 橙色
  '#a0c4ff', // 浅蓝色
  '#b8e994', // 浅绿色
  '#f7d794', // 浅黄色
  '#c9a0dc', // 浅紫色
  '#ff6b6b'  // 红色
];

// 为每个画廊图片添加点击事件监听器，打开弹出层并设置初始图片和背景色
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;

  // 根据当前图片索引动态设置背景色
  // 使用模运算符确保索引不会超出颜色数组的范围
  if (popup) { // 确保popup元素存在
    popup.style.background = backgroundColors[index % backgroundColors.length];
  }
};

// 关闭按钮事件监听器
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); // 更新图片并自动更新背景色
  }
});

// 设置弹出层图片和激活状态的函数
const setPopupImage = (newIndex) => {
  popup.classList.toggle('active');
  if (popup.classList.contains('active')) {
    updateImage(newIndex); // 弹出层激活时，更新图片和背景色
  }
};

// 初始调用，例如在页面加载时预设第一张图片（如果需要）
// 注意：如果popup初始是隐藏的，这个调用可能需要调整
// setPopupImage(0); // 可以在这里调用，但通常在用户点击某个小图时才真正显示