Swiper轮播

Swiper官网

一般来说我们下载红框里面的文件就可以，这个.js文件直接引用使用就可以，它本身就包含JQ库了，所以就不用再引入JQuery库了。
下载完这两个文件我们便于理解还需再下载图中第二个文件夹（完整压缩包），下载完之后首先对文件进行解压，找到demos文件夹，在里面随便找一个文件拖到你的开发工具里面我们可以看到body里面的内容，预留的幻灯片123….就是在里面插入图片的，主要是看js里面的内容（我自己加的备注）

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        pagination : '.swiper-pagination',
        //paginationType : 'fraction'，//在底部以1/9的形式显示当前页
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,//点击圆点
        spaceBetween: 30,//圆点之间的间隙
        centeredSlides: true,//鼠标滑动超过半页会到下一张
        autoplay: 2500,//页面切换的时间
        autoplayDisableOnInteraction: false,
        loop: true,//循环
        mousewheelControl:true,//鼠标滚轮
        //freeMode:true,//鼠标拖动图片
        keyboardControl:true//键盘
    })
</script>
</html>

这基本上就是我们能用得到的属性了，了解完这些之后，正式引入Swiper插件
把之前我们下载的.js文件跟.css文件放到对应的目录下面，新建一个HTML文件，在对应的位置引入这两个文件，然后呢，把完整压缩包里面demo文件下的其中一个文件body里面的内容复制到自己HTML文件的body中，在.js插件后面新建一个script标签，把文件里面js内容也复制到标签中。运行页面，就可以看到效果了，在body的类名为swiper-slide的div中插入自己的图片就可以看到效果啦。在js里面可以修改自己想要的功能
官网里面的具体使用方法（点击）
官网里面详细具体的js功能（点击）