0

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

这应该像在亚马逊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=479&pf_rd_t=101&pf_rd_p=470 我该如何实施？是否有一些控件或 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
4

3 回答 3

2

尝试这个：

<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>
于 2013-05-17T16:13:14.120 回答
1

您可以使用该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;
}

查询：

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

JSFiddle

于 2013-05-17T16:30:07.720 回答
0

您不能只使用 Jquery onClick 更改 div 的 html 吗？

于 2013-05-17T16:09:05.887 回答