変更画像にマウスホイールに

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 右側にランタンがあり、私は異なる色の4つのランタンを持っています。マウスホイールをスクロールしながらこれらのランタンを変更したい。 私は何かしましたが、正しく機能していません。ランタンの画像上でマウスを動かしてスクロールしようとすると、画像はランダムに繰り返され、繰り返されます。 私は無作為に何を変えずに繰り返しますか、私は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の範囲に関心があり、それに乗算します。