最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。

现在把自己写的轮播图这块代码单独拿出来，做一个小demo写在这里记录一下（demo中轮播图的图片网上随意找的）

实现的效果：

1、自动轮播（轮播时间间隔在js代码中自定义）

2、点击左右侧按钮，实现手动切换

3、底部小圆点根据切换图片的位置相应的显示active状态

4、鼠标经过轮播图区域，停止轮播，离开轮播图区域开始轮播

代码目录结果如下：

一、index.html

注：这里以5张图片为例，页面上真正轮播展示给用户看到的是5张不同的图片，但是为了轮播效果的连贯性，所以在第一张图片前面添加上第五张图片，在第五张图片后面加上了第一张图片，所以demo结构里是7张图片，每张图片的尺寸必须都是一样的哦（这里宽高尺寸是720*350px）。

<Meta charset="UTF-8">

图片-5

图片-1

图片-2

图片-3

图片-4

图片-5

图片-1

　　　　　　　

　　　　

Box">