主要用到css3中的动画 @keyframes， animation。
布局是外层一个div宽固定，然后overflow hidden 绝对定位，里面的ul 固定定位。通过对ul添加动画来实现效果。具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
ul li{list-style: none;}
.banner{width: 100%;height: 568px;overflow: hidden;position: relative;}
.banner ul{
width: 500%;
position: absolute;
left: 0;
top: 0;
height: 568px;
-webkit-animation:slide 10s linear infinite;
}
.banner ul li{
float: left;
width: 20%;
height: 568px;
}
.banner ul li:nth-child(1){background:url(img/1.jpg) center; }
.banner ul li:nth-child(2){background:url(img/2.jpg) center; }
.banner ul li:nth-child(3){background:url(img/3.jpg) center; }
.banner ul li:nth-child(4){background:url(img/4.jpg) center; }
.banner ul li:nth-child(5){background:url(img/5.jpg) center; }
@-webkit-keyframes slide{
0%{left: 0;}
20%{left: 0;}
21%{left: -100%;}
40%{left: -100%;}
41%{left: -200%;}
60%{left: -200%;}
61%{left: -300%;}
80%{left: -300%;}
81%{left: -400%;}
100%{left: -400%;}
}
.banner:hover ul{-webkit-animation-play-state:paused;}
</style>
<body>
<div class="banner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>