共计 1259 个字符，预计需要花费 4 分钟才能阅读完成。
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%;}
}
正文完
