今天我们要写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++了