Javascript 如何更改选定div中的图像（鼠标滚动式视差效果）？

首先，非常感谢你检查我的问题

我在一个网站上工作，需要在选定的div中垂直改变图像，就像视差效果一样。共有3个图像，需要更改它们

一个分区中有3个图像。请查看以下屏幕截图

这是图1。所有这3幅图像都是屏幕宽度的一半

这是图2

像这样，还有另一张图3。右侧的黄色内容不变。现在我只添加了一个简单的滚动条来滚动

我需要在这些图像上添加视差效果以垂直滚动，或者在鼠标滚动时快速更改图像

我需要添加的视差效果示例：

或者我想应用这个效果：

但唯一的问题是，当我将相同的代码应用于我的图像时，这种效果会激活到我的整个站点

最重要的是，无论用户从何处滚动页面，我都需要滚动到这3幅图像，显示所有3幅图像，然后向下滚动到下一部分。 我添加了上面的视差代码，但它适用于整个网站，不起作用

---

将上述两种方法应用于我的网站的最佳方式是什么

好的，只要你玩代码，你就需要看到那些脚本和效果是在包装器中构建的，所以视差效果的主要特点是有一个非常好的100%宽度和高度，这样你就可以在你的网站上看到延迟和响应，我可以告诉你做的如下：

将图像包装在一个div中，名称类似于image\u wrapper。 为每个图像父div（如image_部分）添加一个类。 指定图像部分的100%宽度和高度。 为图像_包装添加高度，如下所示：

.image_包装{高度：计算100%*4；} 全高为100%，视差内图像数量为4

<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
  <h2>Parallax Speed -1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
  <h2>Parallax Speed 1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
  <h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
  <h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
  <h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
  <h2>Parallax Speed 0.75</h2>
</div>