Javascript - need an image to disappear momentarily while the the other image transitions

问题

**Hi, fellow Developers! I'm in bit of a rut. I am currently working on making an image fade and transition to another image using Javascript. I'm new to code (and stackoverlow) and am still learning how to program - how can I can make the images fade without being apparent in the background?

What I expected the code to do was fade, transition to the second image, and repeat. It

Here is what the code looks like so far.**

======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>

回答1:

Fading can be made with animation CSS. Liked the code above and I just added a small code `.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>

来源：https://stackoverflow.com/questions/65377170/javascript-need-an-image-to-disappear-momentarily-while-the-the-other-image-tr

标签

javascript

html

css