直接上代码，拿去就能用，换图片直接改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#frame {
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 5px
}
#dis {
position: absolute;
left: -50px;
top: -10px;
opacity: .5
}
#dis li {
display: inline-block;
width: 200px;
height: 20px;
margin: 0 50px;
float: left;
text-align: center;
color: #fff;
border-radius: 10px;
background: #000
}
#photos img {
float: left;
width: 300px;
height: 200px
}
#photos {
position: absolute;
z-index: 9;
width: calc(300px * 4); /*---修改图片数量的话需要修改下面的动画参数*/
}
.play {
animation: ma 10s infinite;
}
@keyframes ma {
0%, 25% {
margin-left: 0px;
}
30%, 50% {
margin-left: -300px;
}
55%, 75% {
margin-left: -600px;
}
80%, 100% {
margin-left: -900px;
}
}
</style>
</head>
<body>
<div id="frame">
<div id="photos" class="play">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<ul id="dis">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
