JQ无限轮播

今天我们要写4张图片的无限轮播图，效果如图：

既然要用JQ写，当然首先要引入JQ了

<scriptsrc="js/jquery-2.2.4.min.js" type="text/javascript"charset="utf-8"></script>

然后让我们进入html布局中

看到html后，有没有疑问：为什么说是4张轮播图，给了5张图片，而且第一张图片和最后一张一样

那就要讲一下，我的思路了，如果走完最后一张切再换到切换到第一张，会有一张空白，若直接切换到第一张，则没有滑动效果，所以在图片的后面多加了一张第一张图，当走完最后一张时，那一段空白就会被多添加的最后一张填满，切换到第一张，在视觉上是最后一张切换到第一张实际是，最后一张添加的图片走完后，才切换到第一张

css部分我们就不说了，直接跳到js部分吧

先说一下，图片向右轮播的函数：

var  n =0；

当第一张开始走的时候，第二个导航圆圈开始变色，同理，当第四个图片开始走的时候，第一个导航圆圈开始变色，当到第五张图片时，切换到第一张图片。animate（）函数时JQ自定义动画

图片向左轮播函数

当是第一张时，切换到最后一张

给导航圆圈添加移入事件：

之所以n++，是因为调用了向左滑动的函数，向左滑动的函数，首先n++了