为激活轮播项内图片添加active-image类并实现切换动画控制

需求说明 #

• 为带有swiper-slide-active类的轮播项内的图片添加active-image类，移除所有非激活轮播项内图片的该类
• 由于动画在添加active-image时触发，要求每次轮播切换时动画仅播放一次，因此切换时必须先移除所有图片的该类，再为当前激活项内的图片添加

原代码问题分析 #

原JS代码存在两个关键问题：

1. images变量是页面初始化时获取的激活项图片集合，轮播切换后不会重新获取，导致后续操作始终针对初始的激活图片，而非当前切换后的激活项图片
2. 切换逻辑没有先统一移除所有图片的active-image类，而是分条件处理，无法保证动画仅触发一次

修正后的代码实现 #

HTML结构（保持不变） #

<div class="swiper">
    <div class="swiper-wrapper">
        <!-- Slide 1 -->
        <div class="swiper-slide">
            <img src="img/1.png" alt="">
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
        </div>
        <!-- Slide 1 -->

        <!-- Slide 2 -->
        <div class="swiper-slide">
            <img src="img/1.png" alt="">
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
        </div>
        <!-- Slide 2 -->
    </div>

    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

修正后的JavaScript代码 #

// 确保已正确初始化Swiper实例，示例配置：
// const swiper = new Swiper('.swiper', {
//     pagination: { el: '.swiper-pagination' },
//     navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
// });

// 封装类控制逻辑
function setActiveImages() {
    // 第一步：移除所有轮播图片的active-image类
    document.querySelectorAll('.swiper-slide img').forEach(img => {
        img.classList.remove('active-image');
    });
    // 第二步：给当前激活项内的图片添加类
    document.querySelectorAll('.swiper-slide-active img').forEach(img => {
        img.classList.add('active-image');
    });
}

// 页面初始化时执行一次，设置初始激活状态
setActiveImages();

// 监听轮播切换事件，每次切换重新执行类控制逻辑
swiper.on('slideChange', setActiveImages);

代码说明 #

1. 封装setActiveImages函数，统一处理类的重置与添加：
   • 先全局移除所有图片的active-image类，彻底清除之前的激活状态，避免残留导致动画重复触发
   • 再给当前激活轮播项内的图片添加类，确保动画仅在当前激活项的图片上触发一次
2. 初始化阶段调用函数，保证页面加载完成后初始激活项的图片状态正确
3. 绑定slideChange事件，每次轮播切换后自动执行类控制逻辑，适配所有切换场景

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