滚动鼠标滚轮时更改图像

Question

var myimages=[
  "images/dad.png",
  "images/terminal.png",
  "images/hi.png",
  "images/hengameh.png",
  "images/shrinedefense.png"
]
var slideshow=document.getElementById("slideshowers")
var nextslideindex=0
function rotateimage(e){
  var evt=window.event || e
  var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
  nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
  nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
  slideshow.src=myimages[nextslideindex]
  if (evt.preventDefault)
    evt.preventDefault()
  else
    return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

if (slideshow.attachEvent)
  slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
  slideshow.addEventListener(mousewheelevt, rotateimage, false)

<img id="slideshowers" class="cover-images" src="http://www.ammaryar.ir/images/dad.png" />

您好，我想在滚动鼠标滚轮的同时更改图像。 您可以在以下链接中找到我想要的内容： http://www.ammaryar.ir 右边有一个灯笼，我有四个不同颜色的灯笼。我想在您滚动鼠标滚轮时更换这些灯笼。 我做了一些事情，但它不能正常工作。如果您在灯笼图片上移动鼠标并尝试滚动，图像会随机变化并重复。 我没有随机更改和重复的内容，我有 5 个菜单选项卡，并且当您滚动鼠标滚轮时，每个菜单都有特定的图像。

Answer 1

const pageHeight = document.documentElement.scrollHeight - window.innerHeight,
      imgElement = document.getElementById('img'),
      images     = ['http://lorempixel.com/400/200/city/1',
                   'http://lorempixel.com/400/200/city/2',
                   'http://lorempixel.com/400/200/city/3',
                   'http://lorempixel.com/400/200/city/4'];
let   lastImage  = 0;

document.addEventListener('scroll', () => {
  let index = parseInt(document.documentElement.scrollTop / pageHeight * images.length);
  index = Math.min(index, images.length - 1); // Prevent few pixel overflow

  if (index !== lastImage) { // If we need to display different image
    lastImage = index;
    imgElement.src = images[lastImage];
  }
});

body {
  height: 700vh;
  margin: 0;
}
img {
  position: fixed;
  top: 0;
}

<img id="img" src="http://lorempixel.com/400/200/city/1"/>

从another answer引用我自己的话：

• document.documentElement.scrollHeight - window.innerHeight 是我们感兴趣的高度。它是整个文档的高度 减少视口的高度。为什么我们需要这种减少？ 因为无论我们当前的滚动位置是什么，我们永远不会滚动 完全没有文档，即我们总是会看到其中的一部分 并且该部分等于视口的高度。
• document.documentElement.scrollTop / pageHeight 将为我们提供相对于文档高度的滚动位置，即百分之多少 我们滚动的文档。它将是从 0 到 1 范围内的数字， 但我们对 0 到 4 的范围感兴趣，因此要相乘。