JavaScript展示商品详情图

 这次的效果是鼠标经过商品缩略图的时候，显示对应的商品大图。实现这个效果看起来并不难，但是有一个问题却是另我们头痛的，在在循环里面为小图标写onmouseover事件的时候，获取不到对应的索引。这也是今天之前，我一直解决不了的问题。这就牵扯到了在JavaScript中，变量与属性的问题。下面开始写这个小功能，并解释变量与属性的区别。
先看一下原始的布局 ，我们所要做的效果无非就是鼠标经过下面的小图片时，上面显示与之对应的大图片。 

 我们的代码按照正常思维肯定是这样写。应该是先获取所有的小图标的对象，然后遍历，在循环里面，写每个小图片的over事件，在事件里把背景图换成对应的大图。但是这样是不对的，我们可以吧对应的索引打印一下，会发现不论是鼠标放到哪一个上面，打印的永远是最后一个的索引。索引拿不到，大图片自然没有办法显示。这是因为i只是一个变量，当鼠标放到小图片的时候，这个循环已经结束了，所以i的值，就是最后一个值。也就出现了问题。

为了解决这个问题，我们用索引的时候 ，就不能直接用i这个变量了，而是为lis这个数组添加一个属性，我们添加为index属性，当然名字可以自定义。就是在循环之初，把i的值给lis[i]的index属性。然后获取索引的时候，直接用lis[i].index属性。这样就解决了获取不到索引的问题。这时候，鼠标放到对应的小图标的时候，就可以展示对应的大图标了。

鼠标放到最后一个小图标上面，效果也就出来了。