Question

嘿所有，我有4个缩略图的列表。当点击其中一个缩略图时，我希望它的更大的合作伙伴形象向旁边展示。一次只能显示一个较大的图像。就像现在一样，我将所有4个较大的图像堆叠在一起，并在＃1图像上设置了z-index，因此它默认位于堆栈顶部。我认为实现这一目标的最佳方法是，当点击一个拇指时，所有图像上的z-index设置为0，而伙伴更大的图像z-index设置为更高的数字？

通过jQuery执行此操作的最简单方法是什么？我相信我能找到一些功能齐全的画廊插件来做到这一点，但这看起来有点矫枉过正，你知道吗？谢谢你的任何建议。我目前的HTML发布在下面：

    <style>
#productimagewrap {
    position:absolute;
    height:350px;
    }
#productimagewrap img {
    position:absolute;
    left:0;
    top:0;
}
</style>
<div class="moreimages">
    <a ahref="#" id="productthumb1">
        <img src="/images/products/ring1-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb2">
        <img src="/images/products/ring2-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb3">
        <img src="/images/products/ring3-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb4">
        <img src="/images/products/ring4-product_thumb.jpg" />
    </a>
</div>


<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
    <a href="/images/products/ring2-large.jpg" class="jqzoom" id="productimage2">
        <img src="/images/products/ring2-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring3-large.jpg" class="jqzoom" id="productimage3">
        <img src="/images/products/ring3-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring4-large.jpg" class="jqzoom" id="productimage4">
        <img src="/images/products/ring4-product.jpg" alt="Amber Ring" />
    </a>
</div>

Answer 1

有多种方法可以做到。最简单的方法是保持默认值可见，然后只更改其src属性。这将是这样做的：

<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
</div>

这是默认图像，现在是jquery部分：

$('.moreimages a').each(function() {
    $(this).click(function() {
        $('#productimagewrap img').attr('src', $(this).attr('src'));
    });
});

这将绑定click甚至在你的moreimages类中的任何链接上，然后单击选择它的src并更改缩放图像的src。此代码将执行此操作，但您需要更改图像的名称或替换它们或其他内容，因为这将在那里显示小图像。我会把它留给你，因为我现在不想弄乱它：P

Answer 2

我不会去z-index路线。引起您不应该处理的额外问题。试试这个：

$(function() {
  $('#productimagewrap a:gt(1)').hide();
  $('.moreimages a').click(function() {
    var index = $('.moreimages a').index(this);
    $('#productimagewrap a:visible').hide();
    $('#productimagewrap a:eq('+index+')').show();
  });
});

哦，并确保从.moreimages锚中删除“ahref”属性;）

Answer 3

来自realshadow的答案

我试过了，但在我看来，$（this）是一个锚，因此没有'src'属性

为了使其有效，我使用了以下内容：

$('.moreimages a').each(function() {
  $(this).click(function() {
    var aimg = $(this).find("img")
    $('#productimagewrap img').attr('src', $(aimg).attr('src'));
  });
});

同样需要注意，你需要在'src'上做一些“替换”，将图像名称更改为较大的一个

单击缩略图时jQuery显示图像

3 个答案: