1、头部加载插件:
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>
2、html部分:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
3、js部分:
$(document).ready(function() {
var mySwiper = new Swiper('.swiper-container', {
loop:true,
autoplay:true,
pagination: {
el: '.swiper-pagination',
clickable: true,
}
});
//此方法为模拟的,hover到分页器的小圆点后自动触发其本身的click事件
$(".swiper-pagination-bullet").hover(function() {
$(this).click(); //鼠标划上去之后,自动触发点击事件来模仿鼠标划上去的事件
},function() {
mySwiper.autoplay.start(); //鼠标移出之后,自动轮播开启
})
})