正如标题所述，我正在尝试创建一个JS脚本，该脚本在同一个<div>中循环遍历一系列图像。这些图像将循环遍历以创建一个平滑的动画。到目前为止，我已经有了这个脚本。这些图像循环遍历，但没有平滑的过渡。第一个
<div>
pn9klfpd1#
已更新以具有正确的pointer-events行为
pointer-events
下面是一个使用display: grid将图像放置在堆栈中的示例。它保留了原始代码的基本结构，但将一些静态样式转移到CSS中，以使JavaScript代码更加集中。希望能有所帮助！示例：第一个
display: grid
d4so4syb2#
你只需要一个类使用不透明度和过渡。使用JavaScript激活类。我还更新了你的JS代码，所以，现在你不必每次迭代通过所有的图像隐藏他们。第一个
lnlaulya3#
我认为解决这个问题的标准方法是保留所有图像display: block，只改变opacity，这样你就可以连续地淡出它。（或者，你可以在图像淡出后设置display: none。）要实现这一点，你需要将图像呈现在彼此的顶部。这可以通过position: absolute实现，前提是你可以手动调整包含元素（p-centered div）的大小。例如：第一个
display: block
opacity
display: none
position: absolute
p-centered
3条答案
按热度按时间pn9klfpd1#
已更新以具有正确的
pointer-events行为下面是一个使用
display: grid将图像放置在堆栈中的示例。它保留了原始代码的基本结构，但将一些静态样式转移到CSS中，以使JavaScript代码更加集中。
希望能有所帮助！
示例：
第一个
d4so4syb2#
你只需要一个类使用不透明度和过渡。
使用JavaScript激活类。
我还更新了你的JS代码，所以，现在你不必每次迭代通过所有的图像隐藏他们。
第一个
lnlaulya3#
我认为解决这个问题的标准方法是保留所有图像
display: block，只改变opacity，这样你就可以连续地淡出它。（或者，你可以在图像淡出后设置display: none。）要实现这一点，你需要将图像呈现在彼此的顶部。这可以通过
position: absolute实现，前提是你可以手动调整包含元素（p-centereddiv）的大小。例如：第一个