[分享]css切换图片时淡入淡出

CSS切换图片时，我们经常需要控制图片的淡入淡出效果。本文将介绍一种使用CSS实现图片淡入淡出的方法。首先，我们需要创建一个div元素，用于包裹图片。我们给这个div设置一个固定宽度和高度，并且设置o...

CSS切换图片时，我们经常需要控制图片的淡入淡出效果。本文将介绍一种使用CSS实现图片淡入淡出的方法。

首先，我们需要创建一个div元素，用于包裹图片。我们给这个div设置一个固定宽度和高度，并且设置overflow:hidden属性，让图片超出这个div的部分隐藏。代码如下：

 <div class="wrapper">
        <img src="image1.jpg" class="img" alt="Image 1">
    </div>
    
    <style>
        .wrapper {
            width: 500px; 
            height: 300px; 
            overflow: hidden; 
        }
        .img { 
            position: absolute; 
            z-index: 1; 
        }
    </style> 

接下来，我们在CSS中定义两个类，一个用于淡入，一个用于淡出。其中，我们需要使用CSS3的transition属性来控制渐变的时间和效果。代码如下：

 <style>
        .fade-in { 
            opacity: 1; 
            transition: opacity 0.5s ease-in-out; 
        }
        .fade-out { 
            opacity: 0; 
            transition: opacity 0.5s ease-in-out; 
        }
    </style> 

最后，我们使用JavaScript来控制图片的切换和淡入淡出。我们为图片添加一个事件监听器，当图片加载完成时，我们添加fade-in类，使其淡入。当我们需要切换图片时，我们先添加fade-out类，将当前图片淡出，然后再将新图片添加fade-in类，使其淡入。具体代码如下：

 <script>
        var imgList = ['image1.jpg', 'image2.jpg', 'image3.jpg']; 
        var current = 0; 
        var img = document.querySelector('.img'); 
        
        function fadeOut() { 
            img.classList.add('fade-out'); 
        }
        
        function fadeIn() { 
            img.src = imgList[current]; 
            img.classList.remove('fade-out'); 
            img.classList.add('fade-in'); 
        }
        
        img.addEventListener('load', function() { 
            img.classList.add('fade-in'); 
        });
        
        setInterval(function() { 
            current = (current + 1) % imgList.length; 
            fadeOut(); 
            setTimeout(function() { 
                fadeIn(); 
            }, 500); 
        }, 3000);
    </script> 

通过以上代码，我们可以实现图片淡入淡出效果，并且可以随时切换图片。