在滚动鼠标轮时更改图像

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是我们感兴趣的身高。它是整个文档的高度被视口高度降低了。我们为什么要减价？因为无论我们当前的滚动位置是什么，我们永远不会完全从文档中滚动，也就是说，我们总是会看到它的某些部分，该部分等于viewport的高度。
• document.documentElement.scrollTop / pageHeight将相对于文档的高度给出我们的滚动位置，即我们滚动的文档的百分比。它将是从0到1范围内的数字，但我们感兴趣的范围是从0到4，因此乘以。