一。先寫兩個(gè)div,把需要輪播的圖片放進(jìn)去

<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規(guī)定一塊區(qū)域,讓圖片在這片區(qū)域顯示；內(nèi)層div把需要顯示的圖片并排合成一張大圖片；主要屬性overflow，hidden值使超出范圍的內(nèi)容不顯示

.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創(chuàng)造一個(gè)動(dòng)畫，通過margin-left移動(dòng)圖片。

.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;
}