如何像视差效果一样在鼠标滚动时更改选定的div中的图像？_JavaScript

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

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

div中有3张图片。 检查以下屏幕截图。

这是图像1。所有这3个图像均为屏幕的一半宽度。

这是图片2。

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

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

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

或者我想应用这种效果： :

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

但是唯一的问题是，当我对图像应用相同的代码时，这种效果正在激活我的整个网站。

最重要的是，无论用户从何处滚动页面，我都需要滚动到这3张图像，显示全部3张，然后向下滚动到下一部分。 我添加了上面的视差代码，但是它适用于整个站点并且无法正常工作。

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

好吧，一旦您使用了代码，就需要看到那些脚本和效果是在包装器中构建的，因此视差效果的主要内容是宽度和高度都为100％，这样您就可以看到其中的延迟和响应能力。您的网站，我可以告诉您的是以下内容：

将图像包装在名称为（image_wrapper）的div中。
为每个图像父div添加一个类，例如（image_section）。
指定image_sections的宽度和高度的100％。
为image_wrapper添加一个高度，如下所示：
.image_wrapper {height：calc（100％* 4）; }全高为100％，视差中的图像数量为4

如何像视差效果一样在鼠标滚动时更改选定的div中的图像？

问题描述

1楼