你还在为轮播图没完成而伤心吗?

你还在为轮播图出现的bug而烦恼

吗?

好消息,特大好消息,利用插件

swiper插件方便快速实现轮播图

插件地址:

https://www.swiper.com.cn/demo/index.html

打开页面

获取插件

点击即可下载

解压

假设你需要下面的分页器,记住030这个编号打开解压后的文件下的demos下的编号为030的html文件,右击查看网页源代码,将涉及到的css与js引入到你的代码中即可

目录里的.min.css与.css的区别在于.min.css是高压文件,比较小,但使用起来与.css并无差别

接下来,进入实战环节

这是030编号的代码

将style样式里面的内容全部复制到之前我写的移动端轮播图效果的.css文件里面
这个地方的代码显然是轮播图盒子,复制以下到我的index.html里面
复制完成后,把图片放到盒子里

将文档中用到的文件全部导入到自己的代码中,注意路径的更改,或者也可以把用到的文件复制一份到自己的代码里


因为我把他们放到了相同目录下,所以路径是这样的

把源码中的style复制到css里

最后,在你写的js文件里面加入这样的代码

最后,大功告成:
值得注意的一点是,由于要在自己写的index.js里写上上述的代码,而写的代码的含义又是使用其他的引入的swiper-bundle.min.js这个文件里面的内容,所以应该先引入swiper-bundle.min.js,再引入自己写的js.同理,自己的css应该在swiper-bundle.min.css引入后引入