非常简单的JS实现动态图片切换效果

今天需要做一个特效，就是鼠标放在不同的图片上，另一个div里的一些图片要跟着变化。

其实这个图片切换的效果基本上每个网站上都会或多或少的有一些，只不会展现的方式不同而已。比如好多网站就是在首页顶部放几张他们公司相关内容的图片，然后动态循环切换或者点击图片右下角的数字来进行切换等等，但是这个切换是在同一个div里进行来回切换

今天做的这个图片效果是在2个不同的div里的图片，点击这个div里的图片，另一个div里的图片要跟着变换。以前做的时候都是通过一些比较复杂的JS来控制的，但是这次这个效果我只用了3句js代码就实现了，是不是觉得不可思议。下面就来看看怎么用3句JS代码来实现这个效果的。

1、<div ><img id="pic1" src="images/names1.jpg" width="924" height="302" alt="" /></div>

2、<div><img src="images/name1.jpg" width="135" height="185" alt="1" onMouseMove="change(this)" /><img src="images/name2.jpg" width="110" height="185" alt="2" onMouseMove="change(this)"/></div>

上面就是2个div，第二个div里有2张图片，现在我需要点击这个div里不同的图片，来对第一个div进行图片的切换。是不是奇怪我要对第一个div进行图片切换，为什么第一个div里只

一张图片呢，不应该是2张呢？下面就来看看吧。

function change(a){

i = a.getAttribute("alt");

document.getElementById('pic1').setAttribute("src","images/names"+i+".jpg");

}

用这3句代码就可以简单的实现图片的切换效果，我来解释一下吧。

第一句function change(a)是定义一个方法，方法的名字就是第二个div里onMouseMove="change(this)"的名字change，在给他一个参数a。

第二句i = a.getAttribute("alt");就是通过getAttribute方法来获取第二个div里alt的值并赋值给i。

第三句document.getElementById('pic1').setAttribute("src","images/names"+i+".jpg");这句话有点不好表达。简单点来说就是通过setAttribute方法，这里面有2个参数，第一个参数就是第一个div里的图片路径名字src，要解释第二个参数先需要强调一点，图片名字一定要是类似的。什么意思呢，就是比如图片的名字都是names1、names2...。

这样就不难理解第二个参数了，就是获取在images路径下，名字为names1.jpg、names2.jpg的图片。然后把获取的图片名字，在通过getElementById方法赋值给第一个div的id。

是不是觉得很简单。