效果如下
所用图片如下
html
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./slider.css">
<link rel="stylesheet" type="text/css" href="../jd/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="slider">
<div class="slider-box">
<img src="./1.webp">
<img src="./2.webp">
<img src="./3.webp">
<img src="./4.webp">
<img src="./5.jpg">
</div>
<div class="button">
<a href="" onclick="b3(event)"><i class="fa fa-angle-left" aria-hidden="true" ></i></a>
<a href=""><i class="fa fa-angle-right" aria-hidden="true" ></i></a>
</div>
</div>
<script type="text/javascript" src="./slider.js"></script>
</body>
</html>
slider.css
.slider-box{
width: 2950px;
animation-name: sliders;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.slider-box:hover{
animation-play-state: paused;
cursor: pointer;
}
.slider-box >img{
float: left;
}
.slider{
width: 590px;
height: 470px;
overflow: hidden;
position: relative;
}
@keyframes sliders{
0%{transform: translateX(0);}
10%{transform: translateX(0);}
20%{transform: translateX(-590px);}
30%{transform: translateX(-590px);}
40%{transform: translateX(-1180px);}
50%{transform: translateX(-1180px);}
60%{transform: translateX(-1770px);}
70%{transform: translateX(-1770px);}
80%{transform: translateX(-2360px);}
90%{transform: translateX(-2360px);}
}
.button{
position: relative;
}
.slider a:first-child{
display: inline-block;
position: absolute;
top: 150px;
left: 0;
}
.slider a:last-child{
display: inline-block;
position: absolute;
top: 150px;
right: 0;
}
.slider a i{
font-size: 170px;
color: gray;
opacity:0.7;
}
