给定一些图像,任务是使用 Javascript 创建从一个图像到另一个图像的缓慢过渡。
先决条件:在本文中,我们将使用以下 JavaScript 方法。
- setInterval() 方法
- clearInterval() 方法
- 异步/等待
- 承诺
方法:给定一些图像,任务是在定期间隔后更改图像,使其具有褪色或溶解效果。要定期更改图像,请使用setInterval()方法。将图像保持在彼此的顶部,并通过定期更改其 z-index 将最顶部的图像移动到底部。
为了使图像过渡具有淡化效果,我们使用异步函数。在异步函数内部,使用另一个setInterval()方法缓慢降低最上面图像的不透明度,直到不透明度变为 0。这样做,最上面的图像将看起来逐渐消失。一旦最上面的图像完全消失,将其移动到最下面的位置并存储新的顶部图像索引。
- Javascript代码:
- 完整代码:
Change Image Dynamically when User Scrolls GeeksforGeeks
A Computer Science Portal for Geeks输出:
注意:图像变化的时间间隔应大于使图像的不透明度小于或等于 0 所需的时间。