jQuery-weui 幻灯片（轮播图）使用
先把官方文档地址献上
因为我觉得官方文档代码写得不全，所以把代码补全了，放在这儿，以后可以直接拿来用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../assets/lib/weui/weui.min.css">
<link rel="stylesheet" href="../assets/lib/jquery-weui/css/jquery-weui.min.css">
<style>
img {
zoom: 0.5;
}
</style>
</head>
<body>
<div class="swiper-container" data-space-between='10' data-autoplay="1000">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="swiper-img" src="../assets/img/policeSupermarket/bn1.png" alt="图片1"></div>
<div class="swiper-slide"><img class="swiper-img" src="../assets/img/policeSupermarket/bn2.png" alt="图片2"></div>
<div class="swiper-slide"><img class="swiper-img" src="../assets/img/policeSupermarket/bn3.png" alt="图片3"></div>
</div>
**这里代码不要忘了，这是幻灯片分页（底部小圆圈）**
<div class="swiper-pagination"></div>
</div>
<script src="../assets/lib/jquery/jquery-2.1.4.js"></script>
<script src="../assets/lib/jquery-weui/js/jquery-weui.min.js"></script>
<script type='text/javascript' src='../assets/lib/swiper/swiper.js' charset='utf-8'></script>
<script>
var mySwiper = new Swiper('.swiper-container',
{
speed: 3000,//播放速度
autoHeight: true,
loop: true,//是否循环播放
setWrapperSize: true,
autoplay:
{
delay: 5000,
disableOnInteraction: false,
},
pagination: '.swiper-pagination',//分页
effect: 'slide',//动画效果
}
);
</script>
</body>
</html>
最后把效果图放在这
547F58BC-5F60-411c-8119-4F26FC000259.png
