主要用到css3中的动画 @keyframes， animation。
布局是外层一个div宽固定，然后overflow hidden 绝对定位，里面的ul 固定定位。通过对ul添加动画来实现效果。具体代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin: 0;padding: 0;} 9 ul li{list-style: none;} 10 .banner{width: 100%;height: 568px;overflow: hidden;position: relative;} 11 .banner ul{ 12 width: 500%; 13 position: absolute; 14 left: 0; 15 top: 0; 16 height: 568px; 17 -webkit-animation:slide 10s linear infinite; 18 } 19 .banner ul li{ 20 float: left; 21 width: 20%; 22 height: 568px; 23 } 24 .banner ul li:nth-child(1){background:url(img/1.jpg) center; } 25 .banner ul li:nth-child(2){background:url(img/2.jpg) center; } 26 .banner ul li:nth-child(3){background:url(img/3.jpg) center; } 27 .banner ul li:nth-child(4){background:url(img/4.jpg) center; } 28 .banner ul li:nth-child(5){background:url(img/5.jpg) center; } 29 @-webkit-keyframes slide{ 30 0%{left: 0;} 31 20%{left: 0;} 32 21%{left: -100%;} 33 40%{left: -100%;} 34 41%{left: -200%;} 35 60%{left: -200%;} 36 61%{left: -300%;} 37 80%{left: -300%;} 38 81%{left: -400%;} 39 100%{left: -400%;} 40 } 41 .banner:hover ul{-webkit-animation-play-state:paused;} 42 </style> 43 <body> 44 <div class="banner"> 45 <ul> 46 <li></li> 47 <li></li> 48 <li></li> 49 <li></li> 50 <li></li> 51 </ul> 52 </div> 53 </body> 54 </html>