滑动切换时为Header添加类：动态切换Header背景需求

嘿，这个需求其实挺常见的，咱们一步步来搞定它：

核心思路 #

1. 先给Header定义好两种状态的CSS样式（透明/正常）
2. 监听当前激活的幻灯片变化
3. 判断激活幻灯片是否包含intro-bg类
4. 对应切换Header的样式类

第一步：编写CSS样式 #

先准备好Header两种状态的样式，记得加过渡动画让切换更丝滑：

/* 正常状态的Header */
.header--normal {
  background-color: #ffffff; /* 换成你自己的正常背景色 */
  color: #333333;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 透明状态的Header */
.header--transparent {
  background-color: transparent;
  color: #ffffff; /* 配合透明背景的文字颜色 */
  transition: background-color 0.3s ease, color 0.3s ease;
}

第二步：根据幻灯片类型选择实现方式 #

情况1：使用Swiper之类的主流幻灯片插件 #

大部分幻灯片插件都会提供切换事件，拿Swiper举例，直接利用它的事件就能轻松实现：

// 获取Header元素
const header = document.querySelector('header');

// 初始化Swiper时绑定事件
const swiper = new Swiper('.swiper-container', {
  // 你的Swiper配置项，比如分页、导航等
  on: {
    // 幻灯片切换完成时触发
    slideChange: function () {
      const activeSlide = this.slides[this.activeIndex];
      updateHeaderStyle(activeSlide);
    },
    // 页面初始化时也要检查一次，避免初始状态错误
    init: function () {
      const activeSlide = this.slides[this.activeIndex];
      updateHeaderStyle(activeSlide);
    }
  }
});

// 封装更新Header样式的函数，复用代码
function updateHeaderStyle(slide) {
  if (slide.classList.contains('intro-bg')) {
    header.classList.add('header--transparent');
    header.classList.remove('header--normal');
  } else {
    header.classList.remove('header--transparent');
    header.classList.add('header--normal');
  }
}

情况2：原生CSS实现的幻灯片（靠切换active类显示） #

如果是自己手写的幻灯片，通过给幻灯片加active类来切换显示，那可以用MutationObserver监听类名变化：

const header = document.querySelector('header');
const slides = document.querySelectorAll('.slide'); // 你的幻灯片类名

// 封装更新样式的函数
function updateHeaderStyle(slide) {
  if (slide.classList.contains('intro-bg')) {
    header.classList.add('header--transparent');
    header.classList.remove('header--normal');
  } else {
    header.classList.remove('header--transparent');
    header.classList.add('header--normal');
  }
}

// 初始化时先检查当前激活的幻灯片
const initialActiveSlide = document.querySelector('.slide.active');
if (initialActiveSlide) {
  updateHeaderStyle(initialActiveSlide);
}

// 创建观察者，监听幻灯片的类名变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只关心类名变化的情况
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      const currentActiveSlide = document.querySelector('.slide.active');
      if (currentActiveSlide) {
        updateHeaderStyle(currentActiveSlide);
      }
    }
  });
});

// 给每个幻灯片添加监听
slides.forEach(slide => {
  observer.observe(slide, { attributes: true });
});

注意事项 #

• 确保你的幻灯片激活状态有明确的标识类（比如active），不然没法准确判断当前显示的是哪一张
• 初始化时一定要执行一次样式更新，不然页面刚加载时Header的样式可能和当前幻灯片不匹配
• 过渡动画可以让切换更自然，建议加上

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