改變形象，同時滾動鼠標滾輪

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，因此相乘。