輪播圖，網頁上經常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種
下面是style部分：
這幾行都能明白吧
<style> *{margin:0;padding:0;} a{text-decoration:none} li{list-style:none;}設計寬度不要超過輪播圖片的總寬度再加不到第一張1張圖片的寬度（加第一張1張圖片的寬度是為了輪播效果看得見）我的是1500寬度和200的高度，再設置溢出隱藏（消除移動出顯示區域還在顯示）
#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}1000%是比較懶的寫法，為了把ul的寬度設置的寬一點，看著很夸張，因為至少需要超過總圖片的寬度兩倍再加不到1張圖片的寬度為什么要兩倍呢，因為圖片是向左移動的（方向自行設置），移出去了后面沒有圖片補充就沒有輪播效果
了，1000%夠長了，就不用了去計算總圖片的寬度了，當然，圖片夠多也可以不這么設置，只要設置總寬度寬度的一半在加上不到一張圖片的寬度。輪播的動畫的名字，多少時間輪播一次
#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}設置浮動讓所有圖片一行顯示和圖片的寬度
#box ul li{float:left;width:133px;height:200px;}設置鼠標滑過暫停
#box:hover ul{animation-play-state:paused;}設置動畫的動畫名和輪播圖移動方向（動畫效果）
@keyframes animal { 0%{margin-left:0;} 100%{margin-left:-1463px;} }</style>下面是body部分
輪播圖一般都可以點擊訪問，所以放在a標簽內
<body><div id="box"><ul> <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/5.jpg" /></a></li> <li><a href="#"><img src="images/6.jpg" /></a></li> <li><a href="#"><img src="images/7.jpg" /></a></li> <li><a href="#"><img src="images/8.jpg" /></a></li> <li><a href="#"><img src="images/9.jpg" /></a></li> <li><a href="#"><img src="images/10.jpg" /></a></li> <li><a href="#"><img src="images/11.jpg" /></a></li> <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/5.jpg" /></a></li> <li><a href="#"><img src="images/6.jpg" /></a></li> <li><a href="#"><img src="images/7.jpg" /></a></li> <li><a href="#"><img src="images/8.jpg" /></a></li> <li><a href="#"><img src="images/9.jpg" /></a></li> <li><a href="#"><img src="images/10.jpg" /></a></li> <li><a href="#"><img src="images/11.jpg" /></a></li> <li><a href="#"><img src="images/1.jpg" /></a></li></ul></div></body>
實現輪播圖的的方法不止一種。下次小編再給大家分享！
新聞熱點
疑難解答
