如何用jQuery实现仅在滚动到Swiper滑块时启动自动播放

原代码问题分析 #

• 仅初始化了第一个匹配的滑块实例，无法同时控制3个滑块
• 固定滚动距离的判断逻辑不精准，无法适配不同滑块的位置和响应式布局
• 未配置autoplay基础选项，导致调用autoplay.start()/stop()方法无效

方法一：使用Intersection Observer API（推荐，性能更优） #

$(function() {
  // 存储所有滑块实例
  const swiperInstances = [];

  // 循环初始化每个滑块
  $(".category .swiper").each(function() {
    const swiper = new Swiper(this, {
      spaceBetween: 20,
      slidesPerView: 3,
      // 绑定当前滑块所在容器内的导航按钮，避免冲突
      navigation: {
        nextEl: $(this).closest('.category').find(".swiper-button-right"),
        prevEl: $(this).closest('.category').find(".swiper-button-left")
      },
      // 配置自动播放参数，初始化时暂停
      autoplay: {
        delay: 3000,
        disableOnInteraction: false // 交互后仍保持自动播放
      },
      autoplay: false
    });
    swiperInstances.push({
      el: this,
      instance: swiper
    });
  });

  // 创建可见性监听实例
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const swiperObj = swiperInstances.find(item => item.el === entry.target);
      if (!swiperObj) return;

      // 进入视图启动播放，离开则停止
      entry.isIntersecting 
        ? swiperObj.instance.autoplay.start() 
        : swiperObj.instance.autoplay.stop();
    });
  }, {
    threshold: 0.1 // 当滑块10%可见时触发逻辑
  });

  // 开始监听每个滑块元素
  swiperInstances.forEach(item => observer.observe(item.el));
});

关键说明 #

• 用.each()循环初始化每个滑块，确保3个实例都被正确创建和管理
• 通过closest('.category')绑定当前滑块容器内的导航按钮，避免多滑块导航冲突
• 利用Intersection Observer API精准检测元素可见性，性能远优于传统scroll事件监听

方法二：使用scroll事件监听（兼容旧浏览器） #

如果需要兼容不支持Intersection Observer的浏览器，可使用滚动事件结合位置计算：

$(function() {
  const swiperInstances = [];

  $(".category .swiper").each(function() {
    const swiper = new Swiper(this, {
      spaceBetween: 20,
      slidesPerView: 3,
      navigation: {
        nextEl: $(this).closest('.category').find(".swiper-button-right"),
        prevEl: $(this).closest('.category').find(".swiper-button-left")
      },
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      autoplay: false
    });
    swiperInstances.push({
      $el: $(this),
      instance: swiper
    });
  });

  // 防抖函数，减少滚动事件触发频率
  function debounce(func, wait) {
    let timeout;
    return function() {
      clearTimeout(timeout);
      timeout = setTimeout(func, wait);
    };
  }

  // 检查滑块可见性的逻辑
  const checkVisibility = debounce(function() {
    const windowTop = $(window).scrollTop();
    const windowBottom = windowTop + $(window).height();

    swiperInstances.forEach(item => {
      const elTop = item.$el.offset().top;
      const elBottom = elTop + item.$el.height();
      // 判断滑块是否进入视图（部分可见即判定为可见）
      const isVisible = elBottom > windowTop && elTop < windowBottom;

      isVisible 
        ? item.instance.autoplay.start() 
        : item.instance.autoplay.stop();
    });
  }, 100);

  // 监听滚动和窗口 resize 事件
  $(window).on('scroll resize', checkVisibility);
  // 页面加载时主动检查一次
  checkVisibility();
});

关键说明 #

• 防抖函数debounce避免滚动事件频繁触发，提升页面性能
• 同时监听resize事件，确保窗口大小变化时仍能正确判断滑块可见性
• 页面初始化时主动执行一次检查逻辑，避免滑块初始在视图内但未启动播放

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