html结构:
<div class="peopleSwiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/people01.png"></div>
<div class="swiper-slide"><img src="images/people02.png"></div>
<div class="swiper-slide"><img src="images/people03.png"></div>
<div class="swiper-slide"><img src="images/people04.png"></div>
<div class="swiper-slide"><img src="images/people01.png"></div>
<div class="swiper-slide"><img src="images/people02.png"></div>
<div class="swiper-slide"><img src="images/people03.png"></div>
<div class="swiper-slide"><img src="images/people04.png"></div>
<div class="swiper-slide"><img src="images/people01.png"></div>
<div class="swiper-slide"><img src="images/people02.png"></div>
<div class="swiper-slide"><img src="images/people03.png"></div>
<div class="swiper-slide"><img src="images/people04.png"></div>
</div>
</div>
</div>
无缝滚动(修改css和autoplay属性)
.swiper-container-free-mode > .swiper-wrapper{transition-timing-function:linear;}
//初始化一个Swiper为peopleSwiper
var peopleSwiper = new Swiper('.peopleSwiper .swiper-container', {
slidesPerView: 8,
paginationClickable: true,
spaceBetween: 5,
autoplay: true, //autoplay设置为true或者1
speed: 1000,
disableOnInteraction: true,
loop:true,
freeMode: true
});
鼠标悬停控制
mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()是控制autoplay属性,无缝滚动是speed属性,mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()可以实现鼠标悬停暂停和继续的效果,但是需swiper执行完speed规定值后再执行暂停,如果需要鼠标悬停立刻暂停,移开后继续需调整mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()控制
swiper3 官方
//鼠标覆盖停止自动切换
mySwiper.container[0].onmouseover=function(){
mySwiper.stopAutoplay();
}
//鼠标移出开始自动切换
mySwiper.container[0].onmouseout=function(){
mySwiper.startAutoplay();
}
/*
或者
mouseenter / mouseleave 和 hover
".peopleSwiper"为html外层类名 peopleSwiper为初始化swiper名
*/
$('.peopleSwiper').mouseenter(function() {
peopleSwiper.stopAutoplay();
}).mouseleave(function() {
peopleSwiper.startAutoplay();
})
$('.peopleSwiper').hover(function() {
peopleSwiper.stopAutoplay();
},function(){
peopleSwiper.startAutoplay();
})
mouseenter / mouseleave 或者 hover
let speedNum = 3000 //swiper滑动速度
let slideViewNum = 8 //swiper容器能够同时显示的slides数量
let slideWidth = $(window).width()*0.9/slideViewNum //每个swiper-slide宽度 0.9是外层容器的宽度是屏幕90%
let transformSlide = "" //鼠标悬停时的transform属性
let moveTime = 0 //轮播图从暂停位置移动到原本应到的位置用时
//初始化swiper
var peopleSwiper = new Swiper('.peopleSwiper .swiper-container', {
slidesPerView: slideViewNum,
paginationClickable: true,
spaceBetween: 5,
autoplay: true,
speed: speedNum,
disableOnInteraction: true,
loop:true,
freeMode: true
});
//鼠标悬停停止离开继续
$('.peopleSwiper').hover(function(){
transformSlide = document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform;
//轮播图原本应移动到的位置
let oldPosition = -1 *parseInt(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform.split("translate3d(")[1].split("px")[0]);
//鼠标悬停时时轮播图位置
let newPosition = -1 *parseInt(window.getComputedStyle(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0],false)["transform"].split("1, ")[2].split(",")[0]);
//鼠标悬停时轮播图的真实transform属性
let nowTarnsform = window.getComputedStyle(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0],false)["transform"];
//修改轮播图从暂停位置移动到原本应到的位置用时
moveTime = speedNum * ((oldPosition - newPosition) / slideWidth);
//改变transform属性
document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform = nowTarnsform;
peopleSwiper.stopAutoplay();
},function(){
document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform = transformSlide;
document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transitionDuration = moveTime+"ms";
peopleSwiper.startAutoplay();
})