css3实现轮播图

最新推荐文章于 2024-09-06 23:20:39 发布

我才不饿呢

最新推荐文章于 2024-09-06 23:20:39 发布

阅读量1.6k

点赞数 2

文章标签：轮播图

本文链接：https://blog.csdn.net/weixin_42203183/article/details/89154545

版权

原理：

通过css3的animation属性，改变left值，实现自动轮播等效果

上代码：

css代码

<style type="text/css">
     .frame{
         position: absolute;
         width: 800px;
         height: 500px;
         left: 200px;
         overflow: hidden;
     }
    a{
       width: 20px;
        height: 20px;
        background-color: red;
        color: #9cc5ef;
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        z-index: 10;
        bottom: 20px;
        right: 400px;
        cursor: pointer;
        margin-right: 5px;
    }
    a:nth-child(2){
        margin-right: 30px;
    }
    a:nth-child(3){
         margin-right: 60px;
    }
    a:nth-child(4){
         margin-right: 90px;
    }
    a:nth-child(5){
         margin-right: 120px;
    }
    a:hover{
        background-color: #9cc5ef;
        color: blue;
    }
    .play:hover{
         animation-play-state: paused;
     }
   .play{
        position: absolute;
        z-index: 9;
        width: calc(800px*5);
    }
    .play img{
        width: 800px;
        height: 500px;
        float: left;
    }
    .play{
        animation: mymove 20s ease-out infinite alternate;
    }
    @keyframes mymove {
        20%{margin-left: 0}
        40%{margin-left: -800px}
        60%{margin-left: -1600px}
        80%{margin-left: -2400px}
        100%{margin-left: -3200px}
    }
     #a1:hover ~ .play{animation: mymove1 1 ease-out forwards}
     #a2:hover ~ .play{animation: mymove2 1 ease-out forwards}
     #a3:hover ~ .play{animation: mymove3 1 ease-out forwards}
     #a4:hover ~ .play{animation: mymove4 1 ease-out forwards}
     #a5:hover ~ .play{animation: mymove5 1 ease-out forwards}
     @keyframes mymove1 {
         100%{margin-left: 0}
     }
     @keyframes mymove2 {
         100%{margin-left: -800px}
     }
     @keyframes mymove3 {
         100%{margin-left: -1600px}
     }
     @keyframes mymove4 {
         100%{margin-left: -2400px}
     }
     @keyframes mymove5 {
         100%{margin-left: -3200px}
     }

</style>

html代码：

<div class="frame">
    <a id="a1">1</a>
    <a id="a2">2</a>
    <a id="a3">3</a>
    <a id="a4">4</a>
    <a id="a5">5</a>
    <div  class="play">
        <img src="img/1.png">
        <img src="img/2.png">
        <img src="img/3.png">
        <img src="img/4.png">
        <img src="img/5.png">
    </div>
</div>