PC端banner如果没有跳转页面的要求，可以使用这个方法来实现简单展示banner的需求，减少页面的体积，浏览页面更加快速。
1.先写两个div,把需要轮播的图片放进去
2.外层div规定一块区域,让图片在这片区域显示；内层div把需要显示的图片并排合成一张大图片；主要属性overflow，hidden值使超出范围的内容不显示.a{
position: absolute;
width: 480px;
height: 270px;
background-color: pink;
overflow: hidden;
}
.b{
position: absolute;
width: 1440px;
height: 100%;
}
.b img{
width: 480px;
height: 100%;
float: left;
}
3.使用animation创造一个动画，通过margin-left移动图片。.play{
animation: ma 10s 3s infinite;
}
@keyframes ma{
0%{
margin-left: 0px;
}
16%{
margin-left: -480px;
}
32%{
margin-left: -480px;
}
48%{
margin-left: -960px;
}
64%{
margin-left: -960px;
}
80%{
margin-left: 0px;
}
100%{
margin-left: 0px;
}
}
.play:hover{
animation-play-state: paused;
}
这个实现方法的整体思路是这样：
1.创建一个div(规定宽高，设置超出隐藏，防止里面的div溢出)
2.div里面创建一个放图片的div(放图片，这个div不要设置超出隐藏，这个div宽度需要和总图片的宽度一致)
3.然后利用CSS的动画，设置图片向那个方向移动，这个就可以说实现一个简单展示banner
