不多说，直接来实现经典轮播图导航栏效果。

实现效果图：

实现代码如下：

JavaScript

下面的这个是index.css文件，主要是样式布局文件：

使用方法：

这里的css文件是放在css文件夹下面，里面会用到一个xframe.js文件，就相当于是一个JQuery文件，大家下载之后改为对应的名字就行，然后放在js 文件夹下面，后面就是一个index.html 文件了， 基本上将上面需要的依赖包放在同一个文件夹下面就可以运行了。

最后，小编整理了一份web前端学习资料，私信回复【01】，获取源码。

欢迎关注胖胖冲鸭的头条号，可视化学习web前端，每天更新文章，让web前端学习更加简单。

声明：本文内容来源于网络，如有侵权请联系删除

• 吧，用swiper做轮播图其实很简单，特别是官网在使用说明上已经讲得很清楚了。
• 但我还是在这里唠叨几下。
• 现有的js库是很丰富的，其实我们常用到的组件都有了，轮播图就是其中之一。
• 本文就讲一下怎么用swiper做轮播图，因为它是一个很出名的轮播图组件。
• 更多文章请关注我的头条号，我是落笔承冰。

一、百度一下“swiper”，进入它的中文官网。

• swiper历经了多个版本，我们就用最新的swiper4来说说吧。

二、调用swiper的方法有很多种，比如用npm安装之类的，这里我们就用下载css和js库文件来实现吧。

• 解压后，里面有很多文件，找哪个呢？就是这两个，一个是css，一个是js。

三、我们创建一个空白test.html文件来添加swiper。

• 引用刚才我们下载的那两个文件。

四、开始做html部分。

• 接下来放入轮播的模块了。

五、大家知道html只是一个外表，js才是内核，于是我们加入js部分。

• 轮播是可以用了，但是真的很很不成看，只有一个很小的范围可以轮播。

六、我们试着改一下轮播图的大小，并加个颜色。

• 我们用谷歌浏览器F12进入控制台，模拟手机界面看一下效果。

七、果然是满宽高只有一半，可怎么划动，只能划到第三块，怎么样才能让三回到一，循环划动呢，加个loop:true就可以了。

• 然后我们再改改样式，让里面的字变大居中，变白色，再把body的边距去掉。

八、再加个功能，让它自动播，我不动手，让它每秒跑到下一下张图。

九、我们再加个分页器，分页器是什么东西，就是轮播下方的一个个小圆点，一点就是一页，这里我们应该有三个点。

十、小圆点是有了，也会随图滚动了，可是它不能点击啊，那好，我们加入这个就可以了点了。

• 还真的可以点击了。

十一、人家的轮播图有左右按钮可以控制图片上一张下一张，我们也可以加。

• 在js里声明相应的对象

十二、即然只是入门，那么到这里就可以了，更多的使用方法，大家可以去官网查一下，最后，我把图片放进去，做出真正的轮播图吧。

• 我搞了三张图，三张图宽高大小不一，直接放进去了，多少会让某些图片少一截或是只看见一部分，这个问题大家自己修改图片或添加样式来处理了，我就不再说了。