求助：为滑块div内的每张图片设置独立背景及透明前景效果

1. 重构HTML结构 #

把每张图片的原图和水印图放在对应容器里，确保结构对应关系清晰：

<div class="row">
  <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12" style="min-height: 1px; padding-left: 5px !important; padding-right: 5px !important; overflow: hidden;">
    <!-- 滑块主容器 -->
    <div class="slider-container" style="position: relative; width: 100%; overflow: hidden;">
      <!-- 背景原图容器，默认隐藏，仅显示当前激活项 -->
      <div class="bg-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        <img src="原图1.jpg" class="bg-item active" style="width: 100%; height: auto; display: none;">
        <img src="原图2.jpg" class="bg-item" style="width: 100%; height: auto; display: none;">
        <!-- 剩余28张原图按此格式依次添加 -->
      </div>
      <!-- 前景水印容器，所有水印图叠加显示，通过索引对应背景 -->
      <div class="watermark-container" style="position: relative; z-index: 10;">
        <img class="watermark-item" src="水印1.png" style="display: block; width: 100%; height: auto; opacity: 0;" data-index="0">
        <img class="watermark-item" src="水印2.png" style="display: block; width: 100%; height: auto; opacity: 0;" data-index="1">
        <!-- 剩余28张水印图按此格式依次添加，data-index对应背景图的顺序索引 -->
      </div>
      <!-- 切换按钮 -->
      <button class="slide-btn prev" onclick="switchSlide(-1)">上一张</button>
      <button class="slide-btn next" onclick="switchSlide(1)">下一张</button>
    </div>
  </div>
</div>

2. 基础CSS调整 #

给滑块元素添加必要样式，保证布局层级正确：

.slider-container {
  position: relative;
  width: 100%;
  height: auto; /* 可根据图片尺寸设置固定高度 */
}

.bg-container .bg-item.active {
  display: block !important;
}

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  padding: 10px 15px;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

3. JavaScript切换逻辑 #

通过索引控制背景图的显示状态，实现滑块切换效果：

let currentSlide = 0;
const bgItems = document.querySelectorAll('.bg-item');
const totalCount = bgItems.length;

function switchSlide(direction) {
  // 移除当前背景图的激活状态
  bgItems[currentSlide].classList.remove('active');
  
  // 更新当前索引，处理循环边界
  currentSlide += direction;
  if (currentSlide < 0) currentSlide = totalCount - 1;
  if (currentSlide >= totalCount) currentSlide = 0;
  
  // 激活新的背景图
  bgItems[currentSlide].classList.add('active');
}

// 初始化显示第一张背景图
bgItems[currentSlide].classList.add('active');

关键提示 #

• 放弃nth-child逐个设置的方式，通过索引对应关系批量处理30张图片，更高效
• 前景水印图保持全透明（opacity:0），始终叠加在背景层上方，切换时仅需控制背景层的显示
• 如果需要水印半透明，直接修改opacity值（如opacity:0.3）即可

内容的提问来源于stack exchange，提问作者Aqsa Zubair