开门见山
<!DOCTYPE html>
<html>
<head>
<title>Slide Image Sample</title>
<style>
.slide {
position: relative;
margin: auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}
.slide ul {
margin: 10px 0;
padding: 0;
width: 9999px;
transition: all 0.5s;
}
/*//自动播放*/
.slide .slide-auto {
animation: marginLeft 10.5s infinite;
}
.slide li {
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}
.slide li:nth-child(1) {
background: #9fa8ef;
}
.slide li:nth-child(2) {
background: #ef9fb1;
}
.slide li:nth-child(3) {
background: #9fefc3;
}
@keyframes marginLeft {
0% {
margin-left: 0;
}
28.5% {
margin-left: 0;
}
33.3% {
margin-left: -600px;
}
62% {
margin-left: -600px;
}
66.7% {
margin-left: -1200px;
}
95.2% {
margin-left: -1200px;
}
100% {
margin-left: 0;
}
}
</style>
</head>
<body>
<div class="slide">
<ul class="slide-auto">
<a href="1.html"><li>1111111111111</li></a>
<a href="2.html"><li>2222222222222</li></a>
<a href="3.html"><li>3333333333333</li></a>
</ul>
</div>
</body>
</html>
shaft说道： 
Google Chrome 
Windows 10