HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body >
<div class="swiper-wrap">
<ul class="swiper-img">
这里的<!---->是为了消除每个li换行所带来的间距问题
<li><img src="./images/1.jpg" alt="" /></li><!--
--><li><img src="./images/2.jpg" alt="" /></li><!--
--><li><img src="./images/3.jpg" alt="" /></li><!--
--><li><img src="./images/4.jpg" alt="" /></li><!--
--><li><img src="./images/5.jpg" alt="" /></li><!--
--><li><img src="./images/6.jpg" alt="" /></li>
</ul>
</div>
<script src="./js/index.js"></script>
</body>
</html>CSS:
body{
padding: 0;
margin: 0;
}
ul{
margin: 0;
padding: 0;
}
.swiper-wrap{
width: 100%;
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
}
.swiper-wrap li{
display: inline-block;
}
.swiper-wrap .swiper-img{
width: 600%;
height: 100%;
border: 1px solid darkcyan;
}
.swiper-wrap .swiper-img li{
width: calc(100%/6);
height: 100%;
}
.swiper-wrap .swiper-img li img{
width: 100%;
height: 100%;
}
/* 切换 */
.swiper-img{
animation: swiper 12s linear infinite;
}
@keyframes swiper{
0% { margin-left: 0%;}
9.1% { margin-left: 0%;}
18.2% { margin-left: -100%;}
27.3% { margin-left: -100%;}
36.4% { margin-left: -200%;}
45.5% { margin-left: -200%;}
54.6% { margin-left: -300%;}
63.7% { margin-left: -300%;}
72.8% { margin-left: -400%;}
81.9% { margin-left: -400%;}
91% { margin-left: -500%;}
100% { margin-left: -500%;}
} 