H5C3实现无缝轮播

来源：互联网发布：网络拓扑画图软件编辑：程序博客网时间：2024/06/09 23:55

我们可以使用H5C3的新属性来实现无缝轮播图，首先创建动画，然后使用动画属性，在将要轮播的图片复制一份，这样就可以实现图片的无缝轮播，但是这样实现有一个缺点那就是需要加载的图片更多了

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            padding: 0;            margin: 0;        }        div {            width: 882px;            height: 86px;            margin: 200px auto;            overflow: hidden;        }        div > ul {            /*设置ul的宽度为2倍div的宽度*/            width: 200%;            list-style: none;            /*动画属性*/            animation: imgMove 5s linear infinite;        }        div > ul > li {            width: 126px;            float: left;        }        div img {            width: 100%;        }        /*创建动画*/        @keyframes imgMove {            from {                transform: translateX(0px);            }            to {                transform: translateX(-882px);            }        }    </style></head><body><div>    <ul>        <li><img src="images/1.jpg" alt=""/></li>        <li><img src="images/2.jpg" alt=""/></li>        <li><img src="images/3.jpg" alt=""/></li>        <li><img src="images/4.jpg" alt=""/></li>        <li><img src="images/5.jpg" alt=""/></li>        <li><img src="images/6.jpg" alt=""/></li>        <li><img src="images/7.jpg" alt=""/></li>        <!--将需要轮播的图片在复制一份-->        <li><img src="images/1.jpg" alt=""/></li>        <li><img src="images/2.jpg" alt=""/></li>        <li><img src="images/3.jpg" alt=""/></li>        <li><img src="images/4.jpg" alt=""/></li>        <li><img src="images/5.jpg" alt=""/></li>        <li><img src="images/6.jpg" alt=""/></li>        <li><img src="images/7.jpg" alt=""/></li>    </ul></div></body></html>

0 0