这次的效果是鼠标经过商品缩略图的时候,显示对应的商品大图。实现这个效果看起来并不难,但是有一个问题却是另我们头痛的,在在循环里面为小图标写onmouseover事件的时候,获取不到对应的索引。这也是今天之前,我一直解决不了的问题。这就牵扯到了在JavaScript中,变量与属性的问题。下面开始写这个小功能,并解释变量与属性的区别。
先看一下原始的布局 ,我们所要做的效果无非就是鼠标经过下面的小图片时,上面显示与之对应的大图片。
先看一下原始的布局 ,我们所要做的效果无非就是鼠标经过下面的小图片时,上面显示与之对应的大图片。
![图片](https://i-blog.csdnimg.cn/blog_migrate/cdb5fe2b9c155d4229f4d98bd843b769.png)
我们的代码按照正常思维肯定是这样写。应该是先获取所有的小图标的对象,然后遍历,在循环里面,写每个小图片的over事件,在事件里把背景图换成对应的大图。但是这样是不对的,我们可以吧对应的索引打印一下,会发现不论是鼠标放到哪一个上面,打印的永远是最后一个的索引。索引拿不到,大图片自然没有办法显示。这是因为i只是一个变量,当鼠标放到小图片的时候,这个循环已经结束了,所以i的值,就是最后一个值。也就出现了问题。
![图片](https://i-blog.csdnimg.cn/blog_migrate/7a49d26a6b8b67dab4867ad38ce2aecc.png)
![图片](https://i-blog.csdnimg.cn/blog_migrate/fd199d814d0b0e4d6d89f944647e3e36.png)
![图片](https://i-blog.csdnimg.cn/blog_migrate/39e22dcea640ae80e8fd37ca3eeb1889.png)
![图片](https://i-blog.csdnimg.cn/blog_migrate/dbb525337d09da7edebf76286ef472a9.png)
鼠标放到最后一个小图标上面,效果也就出来了。