悬停图库上的Jquery图像交换

Question

你好，现在整理好了

整天都在尝试所有不同的 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 目标的图像和一个带有拇指类的锚，为什么这不起作用我迷路了:(

谢谢 乔

Answer 1

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

$(document).ready(function(){
/* put the code here */
});

Answer 2

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

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）上时设置样式，以指示当前在“目标”中查看的图像.不想用就不用。