您现在的位置：首页 >> 前端 >> 内容

H5C3实现无缝轮播

时间：2017/1/7 9:24:00 点击：

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

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

HTML：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<p>  
    <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>  
</p>  
</body>  
</html>

CSS：

* {
	padding: 0;
	margin: 0;
}

p {
	width: 882px;
	height: 86px;
	margin: 200px auto;
	overflow: hidden;
}

p > ul {
            /*设置ul的宽度为2倍p的宽度*/
	width: 200%;
	list-style: none;
            /*动画属性*/
	animation: imgMove 5s linear infinite;
}

p > ul > li {
	width: 126px;
	float: left;
}

p img {
	width: 100%;
}  
        /*创建动画*/  
@keyframes imgMove {
  
	from {
		transform: translateX(0px);
	}

	to {
		transform: translateX(-882px);
	}
}