Javascript 更改鼠标滚轮上的背景图像（向下滚动）。向上滚动时更改图像

我试图在向下滚动时更改背景图像-类似这样

我可以在向下滚动时更改图像，但是没有控制，因为它会更改很多次。我希望它只需在向下滚动时更改一次。然后，当我向上滚动时，我希望它只往回移动一次。但是，当您向上或向下滚动时，它会发生多次变化。理想情况下，我也希望使用数组中的索引来更改图像，但首先要解决有关向下/向上滚动的原始问题

html

<div id="test">
    <div class="bgImage"></div>
</div>

JS

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 1;
}

body, html, #scene, .bgImage {
  height: 100%; 
}

.trees {
  background: url("http://2.bp.blogspot.com/-69o3lsK5MrQ/ThhlOTxGQlI/AAAAAAAAEfY/e0AJF-6sKBw/s1600/bret_hart_-_bret_hart_74.jpg") center center no-repeat;
  background-size: cover;
}

var pages = ['home','urban','trees','people'];
var page = 0;

$(document).ready(function(){
    $('html').on('mousewheel', function(e){
       if(e.originalEvent.wheelDelta /120 > 0) {
          jQuery('.bgImage').addClass('trees');
       }
       else{
            jQuery('.bgImage').removeClass('trees');
       }
    });
});

---

您可以使用标志或计数器检查背景是否应更改。 我制作了一些类似于您提到的页面（）

在代码方面，我将内容分为4部分，并使用

fadeIn

和

fadeOut

进行内容之间的转换。

---

也许这就是你想要的。

那就玩旗子吧@人造丝这意味着什么？

布尔标志

应用条件@你能提供一个答案来详细说明你的意思吗？已被弃用，您应该改为在上使用

：这很好，但仍然无法解决快速滚动时会多次更改的问题。我希望它能得到更多的控制，这样每次滚动只会改变一次，不管你滚动了多少次，你也可以在开始转换和结束转换时给出标志，以防止滚动过快。正如您在@phantom上看到的，当动画标志不为true时，不会触发滚动事件。所以它可以防止用户滚动过快。但是如果你滚动过快一次，你会看到内容会改变很多次。每个人只能更改一次scroll@phantom您是否检查了我更新的JSFIDLE：