0

你好 现在整理好了

整天都在尝试所有不同的 JQuery 插件和 JS 教程，试图在悬停画廊上进行图像交换，就像在亚马逊产品页面上一样，当您将鼠标悬停在缩略图上并且它出现在主图像上时。

我无法让我尝试过的任何工作，下面是我一直在尝试的代码：

html（已编辑）

<div><img id="target" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" /></div>

<div class="left" id="dkProductImage">
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" class="thumb lightbox highlight"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-5-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-5-74x74.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-4-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-4-74x74.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-3-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-3-74x74.jpg" width="100" height="100"></a>
</div>

js（已编辑）

<script language="javascript" type="text/javascript">
$("a.thumb").hover(function() {
   $(this).addClass('highlight')
          .siblings('a.highlight')
              .removeClass('highlight');
   $('#target').attr('src', this.href);
});
</script>

我有一个带有 id 目标的图像和一个带有拇指类的锚点，为什么这不起作用我迷路了:(

谢谢乔

4

2 回答 2

2

是不是缺少了 jQuery 的启动功能？

$(document).ready(function(){
/* put the code here */
});
于 2011-06-06T16:35:40.590 回答
0

要根据您的代码复制亚马逊画廊的行为，请执行以下操作：

html

<div><img id="target" src="image1.jpg" /></div>

<div class="left" id="dkProductImage">
    <a rel="lightbox" title="Jessica Rabbit Original" href="image1.jpg" class="thumb lightbox highlight"><img alt="Jessica Rabbit Original" src="image1_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image2.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image2_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image3.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image3_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image4.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image4_thumb.jpg"></a>
</div>

js

<script language="javascript" type="text/javascript">
   $("a.thumb").hover(function() {
       $(this).addClass('highlight')
              .siblings('a.highlight')
                  .removeClass('highlight');
       $('#target').attr('src', this.href);
   });
</script>

您可以修改它以适合您的口味，但这应该可以让您了解它应该如何工作。

祝你好运

注意：我添加了额外的“highlight”类，因此您可以在鼠标悬停在缩略图（如 Amazon）上时设置样式，以指示当前在“目标”中查看的图像。如果您不想使用，则无需使用它。

于 2011-06-05T23:51:53.220 回答