简易的JQ轮播图

一、主体程序



?
额，上面的主体程序和前一篇没有区别，未做任何修改~~~~~感兴趣的可以查看第一篇文章，我本次随笔重点会在Jquery程序里面

二、CSS样式

?
三、jQuery程序

首先说一下定时自动轮播的原理：

1、首先得开一个定时器，假设定时器的时间设置为2000ms，也就是2S定时器执行一次操作

2、定时器每隔2S执行的操作就是模拟按次序点击数字按钮，也就是触发click事件，让图片左移

先来看大体效果实现的jQuery代码一：

?
上面的程序可以实现每隔2S图片的轮播效果，但是轮播到最后一张图的时候会停止，因为没有判断iNow是否到达最后一张图，所以有了下面的代码二：　　

?
所以jQuery程序的完整代码程序如下：

?
上面的注释写的很详细了，主要是为了方便想学习的小伙伴看，但是实际上我写程序不会注释的那么详细，都是很简单的内容啦，看到这里你可能以为jQuery程序就完了，那就大错特错了，因为自动轮播效果是正确的，但是手动点击时就会出错，我特意做了一段Gif动画展示出错的效果：



看到上面的效果你就会忽然大悟，图片自动轮播时，你就算点击按钮它也只是附和你一下，跳转到你点击的按钮，但是仅仅持续一会还是按它轮播的次序，不理会你点击的按钮后应该走的轮播次序，至于原因嘛

是因为手动点击时index的值未赋值给定时器的图片索引iNow，这样iNow就无法存储你点击的按钮索引值，也就是不知道你点击的哪个按钮，既然知道了原因，那么下面就需要进行修改了。

修改完成后的jQuery程序最终版就是：

?