Javascript - 需要一个图像在其他图像转换时暂时消失

Question

**嗨，开发人员。 我有点老套了。 我目前正在使用 Javascript 使图像褪色并过渡到另一个图像？ 我是编码新手（和 stackoverlow），并且仍在学习如何编程 - 我怎样才能使图像在背景中不明显的情况下褪色？

我期望代码做的是淡入淡出，转换到第二张图像，然后重复。 它

到目前为止，代码如下所示。**

======HTML CODE=====

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript Image Transition</title>
====CSS======

        <style>
            body {
                text-align: center;
            }
            h1 {
                color: green;
            }
    
            img {
                position: absolute;
                left: 400px;
            }
        </style>
    
    </head>
    <body>
        <div id="scroll-image">
    
        <img src="SnugBear_home.png" class="test"/> 
    
        <img src="img.png" class="test"/>
    
        <img src="img2.png" class="test"/>
        </div>
    
=======Javascript Code=======
        <script>
            startImageTransition();
    
            function startImageTransition() {
                
                var images = document.getElementsByClassName("test"); 
    
                for ( var i = 0; i < images.length; ++i) {
                    images[i].style.opacity = 1; 
    
                }
    
                var top = 1;
   
                var cur = images.length - 1; 
    
            setInterval(changeImage, 3000);    
    
            async function changeImage() {
    
                var nextImage = (1 + cur) % images.length;
    
                images[cur].style.zIndex = top + 1;
                images[nextImage].style.zIndex = top;
    
                images[cur].style.zIndex = top;
        
                images[nextImage].style.zIndex = top + 1;
    
                top = top + 1;
    
                images[cur].style.opacity = 1;
    
                cur = nextImage;
            }
                    function transition() {
                    return new Promise(function(resolve, reject) {
   
                        var del = 0.01;
    
                       
                        var id = setInterval (changeOpacity, 10);
    
    
            
                        function changeOpacity() {
                            images[cur].style.opacity -= del;
                            if (images[cur].style.opacity <= 0) {
                                clearInterval(id);
                                resolve();
                            }
                        } 
                }) 
            } 
        } 
        </script>
        
    </body>
    </html>

Answer 1

可以使用 animation CSS 进行褪色。 喜欢上面的代码，我只是添加了一个小代码“.animate()”。

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Javascript Image Transition</title> <style> body { text-align: center; } h1 { color: green; } img { width: 100px; height: 100px; position: absolute; left: 400px; } #one { background-color: red; } #two { background-color: blue; } #three { background-color: green; } </style> </head> <body> <div id="scroll-image"> <img src="SnugBear_home.png" class="test" id="one"/> <img src="img.png" class="test" id="two"/> <img src="img2.png" class="test" id="three"/> </div> <script> startImageTransition(); function startImageTransition() { var images = document.getElementsByClassName("test"); for ( var i = 0; i < images.length; ++i) { images[i].style.opacity = 1; } var top = 1; var cur = images.length - 1; setInterval(changeImage, 3000); async function changeImage() { var nextImage = (1 + cur) % images.length; images[cur].style.zIndex = top + 1; images[cur].animate([ {opacity: 1}, {opacity: 0} ], 3000) images[nextImage].style.zIndex = top; images[nextImage].animate([ {opacity: 0}, {opacity: 1} ], 3000) images[cur].style.zIndex = top; images[nextImage].style.zIndex = top + 1; top = top + 1; images[cur].style.opacity = 1; cur = nextImage; } function transition() { return new Promise(function(resolve, reject) { var del = 0.01; var id = setInterval (changeOpacity, 10); function changeOpacity() { images[cur].style.opacity -= del; if (images[cur].style.opacity <= 0) { clearInterval(id); resolve(); } } }) } } </script> </body> </html>