<!doctype html>
<style>
img{width:500px;
height:300px}
.banner {
width:500px;
height:300px;
border:1px solid red;
margin:0 auto;
position:relative;
overflow:hidden;
}
.long {
width:2500px;
font-size:0;
position:absolute;
left:0;
-webkit-animation:banner 10s infinite;
}
@-webkit-keyframes banner
{
0%,15% {
margin-left:0;
}
25%,40% {
margin-left:-500px;
}
50%,65% {
margin-left:-1000px;
}
75%,90% {
margin-left:-1500px;
}
100% {
margin-left:-2000px;
}
</style>
<body>
<div class="banner">
<div class="long">
<img src="1.jpg ">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
</div>
</body>
</html>
