正如标题所述,我正在尝试创建一个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-centered
div)的大小。例如:第一个