js实现图片的切换

如果你不能简单说清楚，就是你还没有完全明白。

近来在学习js，发现以前用css一些效果，用js也是同样可以实现的，比如：图片的切换。

下面看下我做的图片切换效果：

图片切换效果

思路：

首先设置好布局，一个背景，一个div居中显示，div里面有一张用以呈现大图片的img和两个用以调节上下的按钮，点击按钮切换图片。这个是比较好实现的。

我的难点：（鼠标移动到小圆点，小圆点上面显示小图片，点击小圆点，实现大图片切换）

思路：放置一张img图片默认隐藏，给小圆点加mouseover事件：设置小Img的src,改变小Img的位置。

下面的界面布局的代码html

值得注意的是，小圆点个数是跟图片的数量一致的，所以小圆点并没有写在html代码里面，而在js根据图片的数量动态生成

下面介绍下js里面的代码：

1、首先，我们先将小圆点的布局动态的加入到静态界面html上。

2、实现点击按钮上，下 能切换图片：

思路：

页面加载初始化，点击按钮，点击小圆圈，都会触发切换图片的事件：切换大图片，切换小圆点样式，（如果有做标题和副标题功能，还需要改变标题内容）。于是可以把这个重复的功能封装成一个函数 ，实现代码的复用。

因为图片数组这个特性，可以根据下标知道切换到哪种图片，传递一个数字。

上一页和下一页自然 很简单的就可以实现：

3、实现小圆点的鼠标移动事件和点击事件：

问题：假如我点击第三个小圆点，那么对应的图片就是img[2],那么问题是我怎么 点击第三个小圆点，就知道是2，点击第一个小圆点，就知道是0呢？

思路：万物皆对象，小圆点也不例外，既然是对象，就可以给它加属性。

到这里，整个效果就实现了，发现代码其实就只有一丢丢。

总结

问题：innerHTML动态的往里面写入html代码，会覆盖掉原来的那些。如果获取父级容器的某个元素a，这个时候再去使父级容器调用innerHTML的话,则a元素将再也不能用。

解决这个问题有两种方法：

1、先让父级元素去调用innerHTML实现静态界面的覆盖，之后再去获取父级容器的某个元素a，就能获取到最新的元素a，而不是被覆盖的假a

2、父级容器采用appendChild（）的方法，自己创建，然后再追加到父级容器，就不会导致原来的被覆盖。

巧妙利用属性（索引）解决button.onclick输出i值的问题：

思路：每个button都是一个对象，只要是对象就可以为其加上属性，这里称之为索引。

for(var i=0;i<buttons.length;i++)

{

     buttons[i].index=i;     //index名字随意

     buttons[i].onclick=function()

    {

              alert(this.index);       每个按钮对应会弹出0,1,2...

     }

}