用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出

转自：https://www.bilibili.com/read/cv1522826/

h5部分
<div class="swiper-container1 swiper-jointVenture-container" id="jointVentureSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="" class="jointVentureItem">
<img src="/images/zw_default_img.png">
<div class="mask">
<p>标题标题标题标题标题标题1</p>
<span>文案文案文案文案文案文案文案文案文案文案文案文案</span>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="" class="jointVentureItem">
<img src="/images/zw_default_img.png">
<div class="mask">
<p>标题标题标题标题标题标题2</p>
<span>文案文案文案文案文案文案文案文案文案文案文案文案</span>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="" class="jointVentureItem">
<img src="/images/zw_default_img.png">
<div class="mask">
<p>标题标题标题标题标题标题3</p>
<span>文案文案文案文案文案文案文案文案文案文案文案文案</span>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="" class="jointVentureItem">
<img src="/images/zw_default_img.png">
<div class="mask">
<p>标题标题标题标题标题标题4</p>
<span>文案文案文案文案文案文案文案文案文案文案文案文案</span>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="" class="jointVentureItem">
<img src="/images/zw_default_img.png">
<div class="mask">
<p>标题标题标题标题标题标题5</p>
<span>文案文案文案文案文案文案文案文案文案文案文案文案</span>
</div>
</a>
</div>
</div>
</div>
css部分
.jointVenture .swiper-jointVenture-container .swiper-wrapper {
transition-timing-function: linear;
margin: 0 auto;
}

js部分
// （1）下面的代码决定无缝轮播的效果
var jSpeed = 6000 // 定义了播放速度，你想多少速度就多少速度，这里主要是关系到下面的函数调用
var jointVentureSwiper = new Swiper('.swiper-jointVenture-container',{ // 初始化并存储了轮播器
autoplay: 1, // 设置了自动播放
speed: jSpeed, // 设置了播放速度
freeMode: true, // 设置了是否可以自由运动
loop : true, // 设置了是否可以轮播
slidesPerView :'auto', // 设置了显示的多少个为自动
loopedSlides: 8, // 设置了轮播显示的个数，你的是多少个参与轮播就是多少个
noSwiping : true, // 禁止了手滑动
noSwipingClass : 'swiper-slide'// 禁止了手滑动的元素
})
// （2）下面的代码决定了鼠标一上去能不能暂停播放，移开后能继续流畅播放
/** nextTransForm 移开鼠标后位移到的位置 /
var nextTransForm = ''
/ nextSpeed 移开鼠标后位移的时间 /
var nextSpeed = 0
/ 监听鼠标移到轮播图的子元素上，停止元素 /
('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style').split('transform:')[1].split(';')[0]
/ 得到下一次移动到子元素左边的位置 /
var nextS = -1 * parseInt(nextTransForm.split('translate3d(')[1].split('px')[0])
/ 得到当前鼠标下子元素上的距离左边的 /
var nowS = -1 * parseInt(('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style', ${$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style').split('transform: ')[0]}transform: ${$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).css('transform')};transition-duration:0ms;)
});
/ 监听鼠标移开轮播图的子元素，轮播图继续滚动 **/
('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style', ${$('#jointVentureSwiper').find('.swiper-wrapper').eq(0).attr('style').split('transform: ')[0]}${nextTransForm};transition-duration:${nextSpeed}ms;)
jointVentureSwiper.startAutoplay()
});