四个图片的切换

练习：用四个按钮控制四个图片（1.png，2.png，3.png，4.png）的切换：

方法一：

浏览器中效果：

在点击四个按钮时，就可以切换到对应图片了。

方法二（用循环）：

浏览器中效果（与方法一相同）

需注意的是：我在做的时候用i+1代替了aBtn[i].οnclick=function(){ oImg.src=this.value+".png"; }中的this.value，但是出现错误，不能用i+1代替this.value，用i+1相当于在循环开始时i的值已经加到了5，图片路径从而不正确，无法正确显示。

方法三（用Js）：

要达到的效果：用一个img标签并将其图片信息和图片数量等进行布局；按照图片数量动态生成按钮，并写个数组保存图片信息；设置active的样式为红色背景白色字体，第一个按钮的class="active"，并在点击其他按钮时切换active；尽量使用函数去把代码合并，并在点击按钮时用索引值的一一对应来做当图片切换时同步切换图片信息和图片的数量。

代码如下：

浏览器中效果：