使用JavaScript实现轮播图

经常能看到各种各样的图片轮播，下面就从简单到复杂一步步完成一个图片轮播效果

效果1

这一步需要实现的结果如下图所示

关键点：

1、多张照片叠加，每次只能看到一张照片。

2、点击任意圆点，显示对应顺序的图片（点击第一个圆点，显示第一张图片,第一个圆点改为红色，点击第三个圆点，显示第三张图片，第三个圆点改为红色）。

第二点的关键处在于，如何通过JavaScript得到点击的是第几个圆点。转换一下思路，点击的圆点是父标签的第几个子元素。

方法有二

1是使用sourceIndex。浏览器给每个标签按顺序分配了sourceIndex，若要知道是父标签的第几个子元素，父子两个标签的sourceIndex相减即可。

2是循环。设置变量index=1，确定点击的圆点，查找圆点前面的兄弟节点，每找到一个index++。

var yuan;// 点击的圆点；
var index=0;
while(yuan=yuan.previousElementSilibing){
  index++;
}

完整代码如下