css编写banner轮播

一。先写两个div,把需要轮播的图片放进去

<div class="a">
　　<div class="b play">
　　　　<img src="img/1.jpg" alt="">
　　　　<img src="img/2.jpg" alt="">
　　　　<img src="img/3.jpg" alt="">
　　</div>
</div>

二。外层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;
}

三。使用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;
}