Question

＆＃13;

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)

＆＃13;

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

＆＃13;

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

Answer 1

<Field name="SmallStepSizeNumber" type='number' step={0.000001}
                   component={renderField} label="SmallStepSizeNumber"
                   validate={[  ]}
            />

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;
}

从another answer引用自己：

<img id="img" src="http://lorempixel.com/400/200/city/1"/>是我们感兴趣的高度。它是整个文档的高度   减少了视口的高度。为什么我们需要减少？   因为无论我们当前的滚动位置如何，我们都不会滚动   完全没有文件，即我们总会看到它的一部分   那部分等于视口的高度。

document.documentElement.scrollHeight - window.innerHeight会向我们提供相对于文档高度的滚动位置，即多少百分比   我们滚动的文件。它的数字范围是0到1，   但我们感兴趣的范围从0到4，因此成倍增加。

滚动鼠标滚轮时更改图像

1 个答案: