轮播图、页面动画js插件Swiper的使用方法

1,530 阅读1分钟

使用目的:开发中我们会需要许多动态轮播图片等,自己用js写过于麻烦,此时可以使用插件Swiper搞定轮播滑动等效果

Swiper效果图绝大部分属于移动端

使用步骤:

1.打开Swiper官方网址

www.swiper.com.cn/

2.点击在线演示中-基础演示

3.找好想要的效果图记住编号

4.点击左上角下载全部进入下载页面,点击下载第一个标红模块

5.下载解压后进入文件夹

点击package文件夹找到对应的js和css文件导入所需项目指定位置

min是代码压缩后格式

swiper.min.js或swiper.js

swiper.min.css或swiper.css

6.html页面中导入这两个文件文件

注意:js代码在后html文本后面引入

7.进入文件夹找到demos文件夹,进去找到第3步找到的页面

8.点击进入页面,右键查看网页源代码,把需要的轮播图html代码,css样式,调用js的函数粘贴到我们项目的html页面中去

(1)轮播图html代码:

(2)需要的css代码片段:

注意:导入css代码的时候看清楚,不要把多余样式沾入,导致样式层叠。

(3)调用swiper.min.js文件中方法的js代码:

注意:调用代码要放在导入文件的下面。

9.此时已初步导入完毕,接下来调试,根据自己的需要调试代码css样式属性

10.Swiper的强大之处,通过修改调用函数来达到控制图片状态的目的,不需要修改导入的js文件和css文件

点击官网api文档

通过修改属性和添加方法来控制动态效果