javascript - 如何实现鼠标移动到商品小图片上时替换掉大图片上的图片为当前鼠标移动过的图片？

Question

鼠标经过下面的小图片时上方的图片会被替换成小图片上的图片要怎么实现？
我的图片链接可能比较不一样

Answer 1

你可以在小图片里面绑定上大图片的地址，比如加上data-url="大图地址"，每次hover的时候去获取然后在替换就好了。

Answer 2

简单点的话，就是给小图片li绑定一个鼠标移入事件。当鼠标移入小图片，获取当前图片的src，然后赋值给大图的src

$('#vp').find('li').mouseover(function(){
    var src = $(this).find('img:first').attr('src');
    $('.img-thumbail').attr('src', src);
});

Answer 3

先绑定mouseover事件。然后给大图的src传递this.src

Answer 4

参照JavaScriptDOM编程艺术中的美术馆案例