如何用CSS实现图片幻灯片式的切换？所有图片轮流显示，每次显示一张

HTML 部分

<p id="img-wrap">  
    <img src="img/1.jpg">  
    <img src="img/2.jpg">  
    <img src="img/3.jpg">  
    <img src="img/4.jpg">  
</p>  

CSS部分

 #img-wrap{
            width:300px;
            height:190px;
            position: relative;
            overflow: hidden;
        }
       #img-wrap img{
           width:300px;
           height:auto;
           float:left;
           position:absolute;
           top:0;
           left:0;
           opacity: 0;// 完全透明
       }
        #img-wrap img:first-child{
            animation:h1 8s linear 0s infinite;
            -webkit-animation:h1 8s linear 0s infinite; // 自定义动画名为h1,8s完成该动画，匀速执行该动画，立即执行，循环执行动画 
        }
        #img-wrap img:nth-child(2){
            animation:h1 8s linear 2s infinite;
            -webkit-animation:h1 8s linear  2s infinite ;
        }
        #img-wrap img:nth-child(3){
            animation:h1 8s linear 4s infinite ;
            -webkit-animation:h1 8s linear  4s infinite  ;
        }
        #img-wrap img:nth-child(4){
            /*animation-name: h4;
            animation-delay: 0s;
            animation-duration: 8s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;*/
            animation:h1 8s linear 6s infinite ;
            -webkit-animation:h1 8s linear  6s infinite  ;
        }

        @keyframes h1 {
                  0%{
                      opacity: 1;
                  }
                  25%{
                        opacity: 0;
                    }
            50%{
                opacity: 0;
            }
            75%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        -webkit-@keyframes h1 {
                    0%{
                        opacity: 1;
                    }
                    25%{
                        opacity:0;
                    }
                    50%{
                        opacity: 0;
                    }
                    75%{
                        opacity: 0;
                    }
                    100%{
                        opacity: 0;
                    }
                }

实现思路

为每一张图片添加一个动画效果，动画周期为8s，每张照片显示的时间为2s。

依次使得第一到最后一张的照片的opacity为1（完全不透明，即显示该张照片）其余照片的opacity设为0（完全透明，即不显示该照片）。

注意根据动画的周期（总时长，和每张照片的显示时间），给每张图片设置适当的animation属性。

一些点

CSS部分，也可以将opacity属性替换为z-index属性。

z-index值 大的 将放置在 值小的上层。

最开始，使用的是属性display ,但是始终没能得到理想效果，屏幕上始终一片空白，什么也没有。目前还不清楚原因，待分析。