纯css实现轮播图

左手的ㄟ右手 2022-07-11 15:22 184阅读 0赞

轮播图的实现原理其实是比较简单的

举个例子

main的宽度是100px

div-main的宽度是500px

我们用js控制div-main往左或往右移动，这样就实现了轮播，简单把

好了，先介绍个 css3的api

animation: myfirst 5s linear 2s infinite alternate;

myfirst：动画名

5s：动画多久执行完

linear：动画以什么曲线执行

2s：动画延迟多长时间执行

infinite：该参数是动画一直循环，可以写数字也行

alternate：只动画在倒过来执行

先介绍到这里，完整用法可以参考：css3动画api参考

下面上代码：

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>RunJS</title>
        </head>
        <body>
            <div  >
        <div  class="play">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <ul >
                <li>111111111111111</li>
                <li>22222222222222</li>
                <li>33333333333333</li>
                <li>44444444444444</li>
            </ul>
        </div>
    </div>
        </body>
    </html>

![复制代码][copycode.gif]

#frame{position:absolute;width:302px;height:200px;overflow:hidden;border-radius:5px}
        #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
        #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
        #photos .img{float:left;width:300px;height:200px;background-color:red;border-left:1px solid blue;}
        #photos {  position: absolute;z-index:9;  width: calc(301px * 4);/*---修改图片数量的话需要修改下面的动画参数*/  }
        .play{ animation: ma 5s ease-out infinite alternate;}
        @keyframes ma {
            0%,25% {        margin-left: 0px;       }
            30%,50% {       margin-left: -300px;    }
            55%,75% {       margin-left: -600px;    }
            80%,100% {       margin-left: -900px;    }
    
        }

![复制代码][copycode.gif]

正所谓什么代码也比不上一个   在线运行demo

[copycode.gif]: /images/20220711/f50974027bf8488380b5b234499f896a.png