演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
.content{
/* background-color: blue; */
animation: bg 5s infinite;
margin: 100px auto;
}
.box{
width: 800px;height: 300px;margin: 0 auto;
position: relative;overflow: hidden;
}
.box .slide{
width: 400%;height: 100%;
position: absolute;top: 0;left: 0;
animation: slide 5s linear infinite;
}
.content:hover,.content:hover .slide{
animation-play-state: paused;
}
.box .slide a{
display: block;
width: 25%;height: 100%;
float: left;
}
.box .slide a img{
display: block;
width: 100%;height: 100%;
float: left;
}
@keyframes slide{
0%{left: 0;}
20%{left: 0;}
33%{left: -100%;}
53%{left: -100%;}
67%{left: -200%;}
87%{left: -200%;}
100%{left: -300%;}
}
@keyframes bg{
0%{background-color: #ff0000;}
20%{background-color: #ff0000;}
33%{background-color: #00ff00;}
53%{background-color: #00ff00;}
67%{background-color: #0000ff;}
87%{background-color: #0000ff;}
100%{background-color: #ff0000;}
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="slide">
<a href=""><img src="1.jpg" ></a>
<a href=""><img src="2.jpg" ></a>
<a href=""><img src="3.jpg" ></a>
<a href=""><img src="1.jpg" ></a>
</div>
</div>
</div>
</body>
</html>
