<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
.lunbo{
width: 720px;
height: 896px;
margin: 100px auto;
overflow: hidden;
border: 1px solid black;
position: relative;
}
.lunbo ul{
width: 500%;
list-style: none;
position: absolute;
animation: yb 7s linear 0s infinite normal;
}
.lunbo li{
width: 720px;
height: 896px;
float: left;
}
@keyframes yb{
0%{
transform: translateX(0%);
}
20%{
transform: translateX(0%);
}
25%{
transform: translateX(-720px);
}
45%{
transform: translateX(-720px);
}
50%{
transform: translateX(-1440px);
}
70%{
transform: translateX(-1440px);
}
75%{
transform: translateX(-2160px);
}
95%{
transform: translateX(-2160px);
}
100%{
transform: translateX(-2880px);
}
}
}
</style>
</head>
<body>
<div class="lunbo">
<ul>
<li><img src="img/QQ图片20190226121732.jpg" width="100%" height="100%" alt=""/></li>
<li><img src="img/QQ图片20190226121753.jpg" width="100%" height="100%" alt=""/></li>
<li><img src="img/QQ图片20190226121801.jpg" width="100%" height="100%" alt=""/></li>
<li><img src="img/QQ图片20190226121757.jpg" width="100%" height="100%" alt=""/></li>
<li><img src="img/QQ图片20190226121732.jpg" width="100%" height="100%" alt=""/></li>
</ul>
</div>
</body>
</html>
Note: The first picture and the last picture are the same, the purpose of this is for a better seamless carousel effect