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

Posted 2023-05-09

【中文标题】如何在悬停时实现产品图像更改

【英文标题】：How to Implement Product Image Change on Hover

【发布时间】：2013-05-12 21:17:32

【问题描述】：

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

这应该就像在亚马逊中的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

【参考方案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>

【讨论】：

谢谢。缩略图列表可能很大。如果按下这些按钮，如何在屏幕中仅显示 3 个缩略图、添加滚动按钮并从服务器加载上一个/下一个缩略图？我更新了问题。

【参考方案2】：

您可以为此使用hover 方法

html：

<div class="thumbs">
    <img src="http://lorempixel.com/sports/200/400"  />
    <img src="http://lorempixel.com/city/200/400"  />
    <img src="http://lorempixel.com/people/200/400"  />
</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

【讨论】：

非常感谢。这行得通。不幸的是，缩略图列表可能非常大。如何仅显示 3 个拇指并添加从数据库中检索拇指的上下滚动按钮？我更新了问题。

【参考方案3】：

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

【讨论】：

如果鼠标光标在缩略图上，则需要更改图像，然后单击。我*正在寻找一种方法如何在页面中保存图像并显示特定图像是移动超过缩略图。