使用JavaScript实现图像淡入淡出效果的过渡

在本文中，我们给出了一些图片，任务是使用JavaScript创建从一张图片到另一张图片的缓慢过渡。

前提： 在本文中，我们将使用以下JavaScript方法。

setInterval()方法
clearInterval()方法
async/await
Promise

方法： 给定一些图片，并且任务是以淡入淡出的效果在规则时间间隔内更换图片。使用 setInterval() 方法在规则时间间隔内更换图片。将图片叠放在一起，并通过定期更改其z-index将最上层图片移动到底部。为了让图片过渡带有淡入淡出效果，我们使用 异步函数 。在异步函数内部，使用另一个 setInterval() 方法逐渐降低最上层图片的不透明度，直到不透明度变为0。通过这样做，最上层的图片将慢慢消失。一旦最上层的图片完全消失，将其移动到最底部位置并存储新的顶部图片索引。

示例：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title> 
        Change Image Dynamically when User Scrolls 
    </title> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <b>A Computer Science Portal for Geeks</b> 
    <div id="scroll-image"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" 
             class="test" /> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" 
             class="test" /> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" 
             class="test" /> 
    </div> 
</body> 
</html>

CSS代码

body { 
    text-align: center; 
} 
          
h1 { 
    color: green; 
        } 
          
img { 
    position: absolute; 
    left: 400px; 
}

javascript代码

<script> 
    startImageTransition(); 
      
    function startImageTransition() { 
      
        // images stores list of all images of 
        // class test. This is the list of images 
        // that we are going to iterate 
        var images = document.getElementsByClassName("test"); 
      
        // Set opacity of all images to 1 
        for (var i = 0; i < images.length; ++i) { 
            images[i].style.opacity = 1; 
        } 
      
        // Top stores the z-index of top most image 
        var top = 1; 
      
        // cur stores the index of the image currently 
        // on top images list contain images in the  
        // same order they appear in HTML code  
        /* The tag with class test which appears last 
           will appear on top of all the images thus, 
           cur is set to last index of images list*/
        var cur = images.length - 1; 
      
        // Call changeImage function every 3 second 
        // changeImage function changes the image 
        setInterval(changeImage, 3000); 
      
        // Function to transitions from one image to other 
        async function changeImage() { 
      
            // Stores index of next image 
            var nextImage = (1 + cur) % images.length; 
      
            // First set the z-index of current image to top+1 
            // then set the z-index of nextImage to top 
            /* Doing this make sure that the image below 
               the current image is nextImage*/
            // if this is not done then during transition 
            // we might see some other image appearing 
            // when we change opacity of the current image 
            images[cur].style.zIndex = top + 1; 
            images[nextImage].style.zIndex = top; 
      
            // await is used to make sure 
            // the program waits till transition() 
            // is completed 
            // before executing the next line of code 
            await transition(); 
      
            // Now, the transition function is completed 
            // thus, we can say that the opacity of the 
            // current image is now 0 
      
            // Set the z-index of current image to top 
            images[cur].style.zIndex = top; 
      
            // Set the z-index of nextImage to top+1 
            images[nextImage].style.zIndex = top + 1; 
      
            // Increment top 
            top = top + 1; 
      
            // Change opacity of current image back to 1 
            // since zIndex of current is less than zIndex 
            // of nextImage 
            /* changing it's opacity back to 1 will not 
               make the image appear again*/
            images[cur].style.opacity = 1; 
      
            // Set cur to nextImage 
            cur = nextImage; 
        } 
      
        /* This function changes the opacity of 
        current image at regular intervals*/
        function transition() { 
            return new Promise(function (resolve, reject) { 
      
                // del is the value by which opacity is 
                // decreased every interval 
                var del = 0.01; 
      
                // id stores ID of setInterval 
                // this ID will be used later 
                // to clear/stop setInterval 
                // after we are done changing opacity 
                var id = setInterval(changeOpacity, 10); 
      
                // changeOpacity() decreasing opacity of 
                // current image by del 
                // when opacity reaches to 0, we stops/clears 
                // the setInterval and resolve the function 
                function changeOpacity() { 
                    images[cur].style.opacity -= del; 
                    if (images[cur].style.opacity <= 0) { 
                        clearInterval(id); 
                        resolve(); 
                    } 
                } 
            }) 
        } 
    } 
</script>

输出： 点击此处查看实时输出。

使用JavaScript实现图像淡入淡出效果的过渡