纯CSS3实现banner图片自动轮播效果方式总结

自动轮播：

实现切换图片，图片循环播放；鼠标悬停某张图片， 则暂停切换。

 

方法1、opacity控制透明度实现轮播效果

依照需求我们选择用CSS3的animation动画进行实现；transition动画需要触发才能启动，

所以我们选择自动触发的animation属性；

思路就是：将三个图片进行绝对定位重叠之后，将三个图片的动画放在一条时间轴上，分别在不同时间点控制透明度，在样式代码中的细节

写的很好理解了，在不用DOM的情况下是一种办法。

html:

css:

.banner{
    height: 378px;
    width: 100%;
    position: relative;
    img{
        width:100%;
        height: 378px;
        position: absolute;
        top: 0;
    }   
    &__pics1{
        opacity: 1;
        animation:pics1 5s linear 0s infinite normal both running;
    }
    @keyframes pics1 {
        // 0%{opacity: 1;}
        // 33%{opacity: 1;}
        // 33.3%{opacity: 0;}
        // 66.6%{opacity: 0;}
        // 100%{opacity: 1;}
        from{
            opacity: 1;
        }
        32%{
            opacity: 1;
        }
        33%{
            opacity: 0;
        }
        to{
            opacity: 0;
        }
    }
    &__pics2{
        opacity: 0;
        animation:pics2 5s linear 0s infinite normal both running;
    }
    @keyframes pics2 {
        // 0%{opacity: 0;}
        // 33.3%{opacity: 1;}
        // 63.6%{opacity: 1;}
        // 66.6%{opacity: 0;}
        // 100%{opacity: 0;}
        from{
            opacity: 0;
        }
        30%{
            opacity: 0;
        }
        31%{
            opacity: 1;
        }
        60%{
            opacity: 1;
        }
        61%{
            opacity: 0;
        }
        to{
            opacity: 0;
        }
    }
    &__pics3{
        opacity: 0;
        animation:pics3 5s linear  0s infinite normal both running;
    }

    @keyframes pics3 {
        // 0%{opacity: 0;}
        // 33.3%{opacity: 0;}
        // 66.6%{opacity: 1;}
        // 96.6%{opacity: 1;}
        // 100%{opacity: 0;}
        from{
            opacity: 0;
        }
        60%{
            opacity: 0;
        }
        61%{
            opacity: 1;
        }
        to{
            opacity: 1;
        }
    }

    // &:hover{
    //     &__pics1, &__pics2, &__pics3{
    //         cursor: pointer;
    //         animation-play-state: paused;
    //     }
    // }
}
.banner:hover img{
    animation-play-state: paused;
    cursor: pointer;
}

 

方法2、left定位控制向左实现轮播效果

.banner{
    height: 378px;
    width: 1900px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    img{
        width:100%;
        height: 378px;
        position: absolute;
        top: 0;
    }   
    &__pics1{

        animation:pics1 15s linear 0s infinite normal both running;
    }
    @keyframes pics1 {
        from{
            left: 2000px;;
        }
        2%{
            left: 0;
        }
        31%{
            left: 0;
        }
        33%{
            left: -2000px;
        }
        to{
            left: -2000px;
        }
    }
    &__pics2{

        animation:pics2 15s linear 0s infinite normal both running;
    }
    @keyframes pics2 {
        from{
            left: 2000px;
        }
        31%{
            left: 2000px;
        }
        33%{
            left: 0;
        }
        64%{
            left: 0;
        }
        66%{
            left: -2000px;
        }
        to{
            opacity: -2000px;
        }
    }
    &__pics3{

        animation:pics3 15s linear  0s infinite normal both running;
    }

    @keyframes pics3 {
        from{
            left: 2000px;
        }
        64%{
            left: 2000px;
        }
        66%{
            left: 0;
        }
        98%{
            left: 0;
        }
        to{
            left: -2000px;
        }
    }
}
.banner:hover img{
    animation-play-state: paused;
    cursor: pointer;
}