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

末蓝、 2022-05-27 03:24 286阅读 0赞

HTML 部分

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值 大的 将放置在 值小的上层。
> 
> 上面只是实现了 图片依次显示，像幻灯片的切换效果。但实际结果仍然较为生硬，整个过程不够流畅。
> 
>   
> 
> 
> 如果想要实现图片从左到右（从上到下、从下到上或者从右到左）的切换效果更为流畅，可以将使用left(right/top/bottom)属性 或者 transform：transform( a px) 属性，适当调整 动画执行效果，使图片的切换更加流畅。

完整代码如下

#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;*/
                z-index:1;
            }
            #img-wrap img:first-child{
                animation:h1 8s linear 0s infinite;
                -webkit-animation:h1 8s linear 0s infinite;
            }
            #img-wrap img:nth-child(2){
    
                animation:h2 8s linear 0s infinite;
                -webkit-animation:h2 8s linear 0s infinite ;
            }
            #img-wrap img:nth-child(3){
                animation:h3 8s linear 0s infinite ;
                -webkit-animation:h3 8s linear  0s infinite  ;
            }
            #img-wrap img:nth-child(4){
                animation:h4 8s linear 0s infinite ;
                -webkit-animation:h4 8s linear  0s infinite  ;
            }
    
            @keyframes h1 {
                0%{
                    left:-300px;
                }
                25%{
                    left:0;
                }
                50%{
                    left:0;
                }
                75%{
                    left:0;
                }
                100%{
                    left:0;
                }
            }
    
            @keyframes h2 {
                0%{
                    left:-300px;
    
                }
                25%{
                    left:-300px;
    
                }
                50%{
                    left:0;
    
                }
                75%{
                    left:0;
    
                }
                100%{
                    left:0;
    
                }
            }
            @keyframes h3 {
                0%{
                    left:-300px;
    
                }
                25%{
                    left:-300px;
    
                }
                50%{
                    left:-300px;
    
                }
                75%{
                    left:0;
    
                }
                100%{
                    left:0;
    
                }
            }
            @keyframes h4 {
                0%{
                    left:-300px;
    
                }
                25%{
                    left:-300px;
    
                }
                50%{
                    left:-300px;
    
                }
                75%{
                    left:-300px;
    
                }
                100%{
                    left:0;
    
                }
            }