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

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

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

使用步骤：

1.打开Swiper官方网址

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文档

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