实现轮播图感觉好复杂啊，这个比较简单的实现了
但是还是没有怎么理解代码，只能先发出来慢慢学习学习了
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner-box{
height: 327px;
width: 600px;
overflow: hidden;
/* 超出该标签的长高部分会被隐藏 */
}
.slide-box{
height: 327px;
width: 3000px;/*因为每张图的宽度是1920px，所以这里是1920px*5 的大小*/
/* 动画属性 */
/* animation:自定义关键帧 过度时间 过度效果 循环次数； */
animation:aaa 10s ease-out infinite;
}
.slide-box img{
float: left;
width: 600px;
height: 327px;
}
@keyframes aaa{/*因为是五张图，所以分为5份，如果是4张就分为4份*/
0%,19%{
margin-left: 0;
}
20%,39%{
margin-left: -600px;
}
40%,59%{
margin-left: -1200px;
}
60%,79%{
margin-left: -1800px;
}
80%,100%{
margin-left: -2400px;
}
}
</style>
</head>
<body>
<div class="banner-box">
<div class="slide-box">
<img src="521.jpg">
<img src="520.jpg">
<img src="521.jpg">
<img src="520.jpg">
<img src="521.jpg">
</div>
</div>
</body>
</html>
效果图如下所示：
轮播图会自动轮播设置的图片。完毕。好好学习！！！
标签：box,轮播,327px,height,html,margin,css,left From： https://www.cnblogs.com/Mickeybo101/p/17454322.html