您的位置：首页 > Web前端 > HTML5

H5C3实现无缝轮播

2017-01-05 22:45 363 查看

我们可以使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 无缝轮播 h5c3

相关文章推荐

新的分享

章节导航