用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出无缝移动视觉效果
正常操作，正常分析，大家好，我是D1n910。
文章关键词： 技术 前端 JQuery 入门 滚动
文章前言：
公司要求做官网呀呀呀，其中有一部分设计是要求我们最亲爱的品牌商的LOGO能够在底部无缝轮播，鼠标移上去就停下来。
效果如下：
一、使用插件介绍
1、使用的框架是JQuery，因为讲究快速、兼容、展示，所以没有用vue、react之类的看起来高大上的框架。
2、使用的是优秀的轮播插件Swiper3.0版（实际上Swiper2.0版用起来也是一样一样的），可以配合JQuery使用，这样包的大小会更小
插件官网链接：https://3.swiper.com.cn/api/index.html
三、开始使用
参考官网 https://3.swiper.com.cn/usage/index.html
加载插件。
需要用到的文件有swiper.min.js和swiper.min.css文件。
你可以像下面这样在html里面引用。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>我用的是webpack，所以我在我的js文件里这么引用
import '../../css/swiper-3.4.2.min.less'
import Swiper from './swiper-3.4.2.jquery.min.js' 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 class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<!-- 导航等组件可以放在container之外 -->以下是我的内容
（1）轮播图容器，class名自定，id名自定
（2）基本轮播内容容器
（3）轮播子内容容器
（4）轮播页展示出来的内容，自定义，这里是放图片的容器
（5）我要实现我的效果而做的存储公司logo的img标签
3.样式方面
你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
} 你可以随意自定义css样式，这里我的设置如下（使用的less来写css，内嵌的写法你可以看作是子继承）
.swiper-jointVenture-container {
width: 100%;
overflow: hidden;
padding-top: 140px;
padding-bottom: 196px;
height: 168px;
.swiper-wrapper {
-webkit-transition-timing-function: linear; //（1） 之前是ease-out
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
margin: 0 auto;
}
.swiper-slide {
width: 260px;
margin: 0 20px;
.jointVentureItem {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 168px;
background-color: #ffffff;
box-shadow: 0px 0px 10px 0px rgba(96, 143, 230, 0.1);
border-radius: 10px;
img {
width: 222px;
overflow-y:scroll;
-webkit-filter: grayscale(100%);//（2） 变灰
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);//（2） 变灰
filter: grayscale(100%);//（2） 变灰
filter: gray;//（2） 变灰
}
&:hover{
img {
width: 222px;
overflow-y:scroll;
-webkit-filter: initial;//（3)变回来
filter: initial;//（3)变回来
filter: initial;//（3)变回来
filter: initial;//（3)变回来
}
}
}
}
}上面的代码注释中我标识了（1）、（2）、（3）
（1） 这个很重要，保证了匀速播放
原来的样式长这样
.swiper-container-free-mode>.swiper-wrapper｛
transition-timing-function: ease-out;
margin: 0 auto;
｝我的写法在解析后相当于这样
.jointVenture .swiper-jointVenture-container .swiper-wrapper {
transition-timing-function: linear;
margin: 0 auto;
}linear是匀速；而原来的ease-out相对于匀速，开始时快，结束时候间慢。这么做就可以完美替换样式。
如果不改这个属性，效果会像下面这样
注：修改后的css代码可能不起作用，原因可能是因为你写的等级不够高，可以像我这样在前面加上别的父亲容器的属性增加等级。
（2）能看到品牌没移上去的时候是灰色的，就是用css滤镜实现的。
（3）这个inherit属性是指还原到继承~
4.JS的相关写法（用的JQuery）
// （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 .jointVentureItem').on('mouseenter', function () {
/** 保存下一次移动的位置 **/
nextTransForm = 'transform:' + $('#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).css('transform').split('1, ')[2].split(',')[0])
/** 得到实际上，鼠标移动后，子元素应该移动的时间 **/
/** 注意这个280，这是我的元素这么宽，你可以写代码获取，这是我懒了 **/
nextSpeed = jSpeed * ((nextS - nowS) / 280)
/** transform---设置当前位置；前面的代码是兼容swiper2.0，因为2.0会加点料 **/
/** transition-duration:0ms;让元素不移动 **/
$('#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 .jointVentureItem').on('mouseleave', function () {
/** 讲刚刚的内容直接放上去，然后就会发现又动起来了，且无缝，类似上面的暂停代码 **/
$('#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()
});（1）这是参考了官网的写法，大家试了就知道了
（2）这很关键，如果你直接使用Swiper的暂停方法的话，就会发现它需要【移动到下一个方块】上才会暂停；
原因是因为位移的实现原理是用了css实现，它固定了下一个位移的位置，虽然启动暂停了， 还是需要移动到写好的位移的下一个位置才暂停。
所以我通过（2）直接用当前的位置替换，再把时间换成0s，就可以暂停；
记录原来要位移到下一个地点的位置，计算之间的距离从而得到【匀速】运动到那里的时间，就可以达到移开鼠标后又无缝移动的视觉效果啦。
教程完毕。
公司官网目前已经上线了，做的时间不是很久，不到两周
地址:
http://www.lecloudpay.com/
服务器很小，所以加载资源有点尴尬，前端是我一个人做的，害羞羞。沿用了之前的大佬的做法。没有兼容IE8，大家可以上去看看~。
来自蛋糕D1n910——欢迎关注呀
有什么问题、批评意见，欢迎在评论区指出，我一定会回复的哦。
