swiper移入暂停_用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里面引用。

...

...

我用的是webpack，所以我在我的js文件里这么引用import '../../css/swiper-3.4.2.min.less'

import Swiper from './swiper-3.4.2.jquery.min.js'

2.HTML内容

官网示例

Slide 1

Slide 2

Slide 3

以下是我的内容

(1)轮播图容器，class名自定，id名自定

(2)基本轮播内容容器

(3)轮播子内容容器

(4)轮播页展示出来的内容，自定义，这里是放图片的容器

(5)我要实现我的效果而做的存储公司logo的img标签

3.样式方面

你可能想要给Swiper定义一个大小，当然不要也行