思路：
1.点击按钮，改变显示的图片。同时改变对应小圆点的颜色。
2.点击小圆点，改变小圆点颜色，显示对应的图片。
3.鼠标移入图片内，轮播图停止，鼠标移出则恢复。
难点：
1.快速点击按钮，如何实现图片播放完成后在进行下一张图片的播放（解决方法：函数截流。判断该图片是否正在播放，如果为真则停止后续函数的执行。如：if (imgLi[a].isaimate) return）。
2.如何实现图片自动播放时时，小圆点同步改变（解决方法：排他模型）。
个人容易忘记的地方。
for (i = 0; i < circlesLi.length; i++)
{
###一定要记得先编号！！！
circlesLi[i].index = i;
circlesLi[i].onclick = function(){
if (imgLi[a].isaimate) return;
animate(imgLi[a], {"opacity": 0}, 700)
a = this.index;
animate(imgLi[a], {"opacity": 1}, 700)
changeCircles();
}
}
