使用JavaScript实现轮播图

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

效果1

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

关键点：

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

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

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

方法有二

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

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

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

完整代码如下

可以进一步完善的点

1、可以在左右两个添加箭头，点击箭头切换图片，若当前显示的是第一张图片，点击向前的箭头显示最后一张图片

2、图片自动切换

so，接着一步一步实现上面提到的吧！

点击左右箭头，切换图片

实现思路如下：定义变量imgIndex保存当前显示的是第几张图片，点击向前的箭头imgIndex--；点击向后的箭头imgIndex++;

// 点击向前的箭头
imgIndex--;
if(imgIndex<0){
    imgIndex=imgNum-Math.abs(imgIndex);// imgNum图片数目
}
imgSwitch(imgIndex) // 调用图片切换展示函数

// 点击向后的箭头
imgIndex++;
if(imgIndex>=imgNum){
    imgIndex=imgIndex%imgNum;
}
imgSwitch(imgIndex);

另外，因为还通过第几个圆点的颜色为红色（其他颜色，其他状况）来决定显示第几张图片，，所以在点击前后箭头或者圆点时需要同步imgIndex(显示的是第几张图片），解决方法也简单 imgIndex使用全局变量即可。

图片自动切换

实现思路也很简单，每隔一段时间自动修改imgIndex的值，自动调用imgSwitch()函数。

setInterval(function(){
imgIndex++;
if(imgIndex>imgNum){
   imgIndex=imgIndex%imgUnm;
}
imgSwitch(imgIndex);
},3000)

完整效果查看地址： 这里