前言：
1、项目需求：最初该页面是隐藏的（display:none），通过点击一个按钮触发页面展示（把display的属性修改为block）；要求页面在展示的时候某一部分内容是自动滚动的效果。
2、项目中引入使用的swiper版本是4.x。
3、项目没使用流行的前端框架，仅仅是通过html + css + js + jq实现的。
使用步骤：
1、下载swiper.min.css和swiper.min.js文件并放到项目中 pan.baidu.com/s/192IOk1H6… （4.x版本下载连接）
2、在index.html页面引入文件
3、使用
html部分：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul>
<li>生育津贴如何领取</li>
<li>安全员证书如何领取</li>
<li>疫情防控</li>
</ul>
</div>
</div>
</div>
js部分：
var mySwiper;
$(".fireBox").click(function () {
var show = $(".conBox").css("display")
console.log("show", show);
if (show == "block") { //关闭
mySwiper.destroy(true);//销毁实例**************
$(".conBox").fadeOut()
localStorage.setItem("data", 0)
} else { //打开
mySwiper = new Swiper(".swiper-container", {
direction: "horizontal", // 水平
loop: true, // 循环模式选项
autoplay: {
disableOnInteraction: false,
delay: 1000,//延迟时间
},
observer: true, //监视
observeParents: true,//监视父盒子发生变化 ---- display:none/block
on: { //绑定事件
touchStart: function () { //当点击到slider时执行
console.log(12345)
}
}
});
var swiperslides = document.querySelector('.swiper-wrapper')
swiperslides.onmouseenter = function () { //鼠标移入停止切换
mySwiper.autoplay.stop()
},
swiperslides.onmouseleave = function () { //鼠标离开开始切换
mySwiper.autoplay.start()
}
var src = $(this).children("img").attr("src")
console.log("src", src)
$(".conBox").fadeIn()
localStorage.setItem("data", 1)
}
})
js代码中，涉及到swiper的主要是：1，6，12~33行的代码。
代码分析：
1、第6行的代码，是为了销毁new Swiper()出来的实例。如果实例不销毁，每次从display:none切换到display的样式为block都会创建一个实例，所有的配置都是放在同一个swiper-container类上，产生了滚动的效果的累加。
2、19、20行，是在Swiper上启用动态检查器，如果改变了swiper-container的样式（隐藏/显示）Swiper会重新初始化。observeParents将动态检查器(Mutation Observer)应用于Swiper 的所有祖先元素。当Swiper 的祖先元素发生变化时(show和hide),重新初始化。
3、27~33行，是通过js事件绑定实现鼠标移入/离开滚动效果停止/开始。（在文档中找了半天没有找到对应的事件）
