为图片画廊设置独立背景色：CSS与JavaScript的实现教程

/* style.css */

/* 为画廊中第一个图片容器设置红色背景 */
.gallery-image:nth-child(1) {
  background: red;
}

/* 为画廊中第二个图片容器设置绿色背景 */
.gallery-image:nth-child(2) {
  background: green;
}

/* 为画廊中第三个图片容器设置蓝色背景 */
.gallery-image:nth-child(3) {
  background: blue;
}

/* 依此类推，为其他图片容器设置不同背景色 */
.gallery-image:nth-child(4) {
  background: purple;
}
.gallery-image:nth-child(5) {
  background: orange;
}
.gallery-image:nth-child(6) {
  background: brown;
}

/* 确保 .popup 元素的背景色不会影响到缩略图 */
.popup {
  /* ... 其他样式 ... */
  background: pink; /* 弹出层默认背景色，或留空等待JS动态设置 */
}

<!-- index.html -->
<div class="gallery">
    <div class="gallery-image">
        @@##@@
    </div>
    <div class="gallery-image">
        @@##@@
    </div>
    <div class="gallery-image">
        @@##@@
    </div>
    <div class="gallery-image">
        @@##@@
    </div>
    <div class="gallery-image">
        @@##@@
    </div>
    <div class="gallery-image">
        @@##@@
    </div>
</div>

<!-- index.html -->
<div class="gallery">
    <div class="gallery-image" data-bg-color="red">
        @@##@@
    </div>
    <div class="gallery-image" data-bg-color="green">
        @@##@@
    </div>
    <div class="gallery-image" data-bg-color="blue">
        @@##@@
    </div>
    <div class="gallery-image" data-bg-color="purple">
        @@##@@
    </div>
    <div class="gallery-image" data-bg-color="orange">
        @@##@@
    </div>
    <div class="gallery-image" data-bg-color="brown">
        @@##@@
    </div>
</div>

// index.js

// 更改选择器，直接获取 .gallery-image 元素，而不是 .image
const galleryImages = [...document.querySelectorAll('.gallery-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; // 将跟踪当前图片索引

// 为每个画廊图片容器添加点击事件监听器
galleryImages.forEach((item, i) => {
    item.addEventListener('click', () => {
        updateImage(i); // 更新图片和背景
        popup.classList.add('active'); // 使用 add 而不是 toggle，确保打开时激活
    });
});

// 更新图片和弹出层背景的函数
const updateImage = (i) => {
    let path = `img/img${i+1}.png`;
    largeImage.src = path;
    imageName.innerHTML = path;
    imageIndex.innerHTML = `0${i+1}`;
    index = i;

    // 获取当前画廊图片的 data-bg-color 属性
    const currentGalleryImage = galleryImages[index];
    const bgColor = currentGalleryImage.dataset.bgColor; // dataset 访问 data-* 属性

    // 应用背景色到 popup 元素
    if (bgColor) {
        popup.style.background = bgColor;
    } else {
        popup.style.background = 'pink'; // 如果未设置数据属性，则使用默认背景色
    }
};

// 关闭按钮事件
closeBtn.addEventListener('click', () => {
    popup.classList.remove('active'); // 使用 remove 确保关闭时移除激活状态
});

// 左箭头事件
leftArrow.addEventListener('click', () => {
    if (index > 0) {
        updateImage(index - 1);
    }
});

// 右箭头事件
rightArrow.addEventListener('click', () => {
    if (index < galleryImages.length - 1) { // 注意这里使用 galleryImages.length
        updateImage(index + 1);
    }
});

// 初始设置（如果需要默认打开第一张图片）
// setPopupImage(0); // 原始代码，如果不需要默认打开，可以移除