正常操作,正常分析,大家好,我是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内容
官网示例
以下是我的内容
(1)轮播图容器,class名自定,id名自定
(2)基本轮播内容容器
(3)轮播子内容容器
(4)轮播页展示出来的内容,自定义,这里是放图片的容器
(5)我要实现我的效果而做的存储公司logo的img标签
3.样式方面
你可能想要给Swiper定义一个大小,当然不要也行