swiper中文官网地址：在这里
官网介绍：Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
按照使用方法下载指定版本的swiper文件；
需要用到的文件有swiper-bundle.js和swiper-bundle.css文件，还需要引入map文件，不然会有警告提示；
准备工作：
先将图片放到指定文件夹，然后新建js文件，记录图片位置；将记录存放在数组中，方便后续使用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片轮播</title>
<link rel="stylesheet" href="swiper-bundle.css">
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
overflow: hidden;
background-color: black;
}
.bg {
margin: 0 auto;
height: 100%;
width: 350px;
position: relative;
}
.bg>img {
height: 100%;
width: 350px;
position: absolute;
}
.swiper {
/* 相对定位 */
position: relative;
width: 280px;
height: 100%;
overflow: hidden;
}
.swiper-slide {
background-image: url(imgs/333.jpeg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 80%;
top: 10%;
}
</style>
</head>
<body>
<script src="imgs/imgs.js"></script>
<script src="swiper-bundle.js"></script>
<div class="bg">
<img src="pg_a.png" />
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
</div>
</div>
</div>
<script>
var wrapper = document.getElementsByClassName('swiper-wrapper')[0]
//var slide = '<div class="swiper-slide"></div>'
for (let i = 0; i < imgs.length; i++) {
console.log(imgs[i]);
var box = document.createElement('div');
box.className = "swiper-slide"
box.style.backgroundImage = 'url('+imgs[i]+')'
wrapper.appendChild(box)
}
</script>
<script>
var mySwiper = new Swiper('.swiper', {
autoplay: true,//可选选项，自动滑动
loop:false,
})
</script>
</body>
</html>
