求助：实现可垂直滚动切换的全屏背景图JavaScript画廊

嘿，我帮你搞定这个全屏滚动画廊的问题～首先先提个小细节，你代码里最后一个div的id写成img2了，得改成img3，不然后续JS选择元素会出问题，先把HTML修正过来：

<style>
#img1 { background-image: url("<?php echo $image ;?>"); height:100vh !important; background-position: center; background-repeat: no-repeat; background-size: cover; }
#img2 { background-image: url("<?php echo $image2 ;?>"); height:100vh !important; background-position: center; background-repeat: no-repeat; background-size: cover; }
#img3 { background-image: url("<?php echo $image3 ;?>"); height:100vh !important; background-position: center; background-repeat: no-repeat; background-size: cover; }
</style>
<div id="img1" class="gallery-slide"></div>
<div id="img2" class="gallery-slide"></div>
<div id="img3" class="gallery-slide"></div>

我给每个slide加了个统一的class gallery-slide，这样JS里更容易批量处理，不用逐个写id。接下来就是核心的滚动检测和切换逻辑，用jQuery来实现的话，我们需要监听滚动事件，同时做防抖处理（避免滚动时频繁触发），还要判断滚动方向，然后平滑滚动到对应的图片：

$(document).ready(function() {
  // 初始化当前显示的图片索引，从0开始
  let currentSlide = 0;
  // 获取所有的slide元素
  const slides = $('.gallery-slide');
  // 总slide数量
  const totalSlides = slides.length;
  // 上一次的滚动位置，用于判断方向
  let lastScrollTop = 0;
  // 防抖定时器，避免滚动事件频繁触发
  let scrollTimer;

  $(window).on('scroll', function() {
    // 清除之前的定时器
    clearTimeout(scrollTimer);
    // 设置新的定时器，延迟100ms执行，避免滚动过程中多次触发
    scrollTimer = setTimeout(function() {
      const scrollTop = $(this).scrollTop();
      // 判断滚动方向：向下滚动时scrollTop > lastScrollTop，向上则相反
      const isScrollDown = scrollTop > lastScrollTop;
      
      // 滚动差值超过10px才触发切换（你要求的阈值）
      if (Math.abs(scrollTop - lastScrollTop) >= 10) {
        if (isScrollDown && currentSlide < totalSlides - 1) {
          // 向下滚动，切换到下一张
          currentSlide++;
        } else if (!isScrollDown && currentSlide > 0) {
          // 向上滚动，切换到上一张
          currentSlide--;
        }

        // 平滑滚动到对应的slide位置
        $('html, body').animate({
          scrollTop: slides.eq(currentSlide).offset().top
        }, 500); // 500ms是滚动动画时长，可按需调整
      }

      // 更新上一次的滚动位置
      lastScrollTop = scrollTop;
    }, 100);
  });

  // 初始化时滚动到第一张图片顶部
  $('html, body').scrollTop(slides.eq(currentSlide).offset().top);
});

关键逻辑说明： #

• 防抖处理：用定时器延迟执行滚动判断，避免滚动过程中每滚动1px就触发一次，提升性能和体验
• 滚动方向判断：通过对比当前滚动位置和上一次的位置，确定是向上还是向下滚动
• 边界限制：确保滚动时不会超出图片数量的范围（比如第一张不能再向上滚，最后一张不能再向下滚）
• 平滑滚动：用animate方法实现切换时的平滑过渡，和你想要的示例效果一致

另外，如果你后续要增加更多图片，只需要按照同样的结构添加div.gallery-slide，JS会自动识别总数量，不用修改逻辑代码～

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