[分享]css3图片层叠切换

CSS3提供了一种图片层叠切换的方法，可以让网页中的图片实现炫酷的效果。下面就来介绍一下这种方法。

.slide{
    position: relative;
}

.slide img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

.slide img.current{
    opacity: 1;
} 

首先，要将图片所在的容器的position属性设置为relative，并将所有图片的position属性设置为absolute。然后，将图片的opacity属性设置为0，即不可见状态，并且添加一个过渡效果。

接下来，在html文件中设置一个类名为current的图片，用来显示在初始状态下的图片。

<div class="slide">
    <img src="image1.jpg" class="current" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
</div> 

在javascript中可以使用定时器来切换图片。比如，每2秒钟切换一次图片：

var slideIndex = 0;
function slide(){
    var slides = document.getElementsByClassName("slide")[0].getElementsByTagName("img");
    for(var i=0; i<slides.length; i++){
        slides[i].classList.remove("current");
    }
    slideIndex++;
    if(slideIndex >= slides.length){
        slideIndex = 0;
    }
    slides[slideIndex].classList.add("current");
}
setInterval(slide, 2000); 

在javascript中，通过获取slider容器下的所有图片元素，循环移除current类名，再将slideIndex加1，判断是否超出图片数量，如果超出则将slideIndex重置为0，然后将下一张图片添加current类名。

这样就完成了一次图片的切换，整个过程中使用了css3的opacity属性以及过渡效果，并且在javascript中通过classList来切换类名。这样就实现了一个很简单的图片层叠切换效果。