如何在悬停上实现产品图像更改

Question

我正在创建一个购物车，其中应包含左侧列中的单列和主产品图像中的产品缩略图。如果将鼠标悬停在缩略图图像上，主图像应替换为缩略图中的图像。

这应该像在http://www.amazon.com/gp/product/B0057OCDQS/ref=s9_simh_gw_p422_d0_i1?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-3&pf_rd_r=1ZQ6JXTTST3W87ZTQE26&pf_rd_t=101&pf_rd_p=470938811&pf_rd_i=507846中的亚马逊一样。我该如何实现？是否有一些控件或jQuery插件？如果没有，我在哪里可以找到代码示例？

使用jQuery，jQuery UI，ASP.NET /Mono MVC3。

更新

缩略图列表非常大。如何只显示3个缩略图并添加上下滚动按钮，可以选择上一个和下一个拇指。类似的东西：

scroll one thumb up

thumbnail image 1

thumbnail image 2

thumbnail image 3

scroll one thumb up

Answer 1

试试这个：

<img src="img/myimage_tb.png" data-src="img/myimage.png">
<script>
    $('.productImage').hover(function(){
         $(this).data('thb') = this.src;
         this.src = $(this).data('src');
      },function(){
         this.src = $(this).data('thb');
    });
</script>

Answer 2

您可以使用hover方法

HTML：

<div class="thumbs">
    <img src="http://lorempixel.com/sports/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/city/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/people/200/400" width="50" height="50"/>
</div>

<div class="main-img">
    <img id="main" src="http://lorempixel.com/people/200/400"/>
</div>

CSS：

.thumbs {
    display: inline-block;
    vertical-align: top;
}

.thumbs img {
    display: block;
}

.main-img {
    display: inline-block;
}

JQuery的：

$('.thumbs img').hover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
});

JSFiddle

Answer 3

你不能使用Jquery onClick改变div的html吗？