1

现在我点击缩略图（link_to_thumbnail1.jpg），更大的图像（link_to_big_image1.jpg）显示在带有 id 的 div 中#imageWrap。

如何使用 jquery 更改带有#imageWrap缩略图的 div 内的当前图像？

示例：我点击缩略图 1（link_to_thumbnail1.jpg），#imageWrap（Link_to_main_image0.jpg）中的当前图像变为缩略图 1，以此类推...

我希望，有办法解决这个问题。

<script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnail').live("click", function() {
            $('#mainImage').hide();
            $('#imageWrap').css('background-image', "url('/ajax-loader.gif')");
            var i = $('<img />').attr('src',this.href).load(function() {
                $('#mainImage').attr('src', i.attr('src'));
                $('#imageWrap').css('background-image', 'none');
                $('#mainImage').fadeIn();
            });
            return false; 
        });
    });
</script>

<div class="Image" id="imageWrap">    
    <img src="Link_to_main_image0.jpg" alt="" title="" id="mainImage" />     
</div>

<a href="link_to_thumbnail1.jpg" class="thumbnail">
    <img src="link_to_big_image1.jpg" alt="" title="" /> 
</a>

<a href="link_to_thumbnail2.jpg" class="thumbnail">
    <img src="link_to_big_image2.jpg" alt="" title="" />     
</a>

<a href="link_to_thumbnail3.jpg" class="thumbnail">
    <img src="link_to_big_image3.jpg" alt="" title="" /> 
</a>
4

2 回答 2

1

是你要找的吗？：

http://jsbin.com/avofoj/1/edit 

$(document).ready(function(){
  $('.thumbnail').click(function(){
    $('#imageWrap img').empty();
    $('#imageWrap img').attr('src',$(this).attr('src'));
  });
});
于 2013-01-15T09:55:00.757 回答
0

我对你想要达到的目标有点困惑。但是，如果您有 a<div class="imageWrapper"></div>并且希望它包含其他内容，则可以.html()像这样使用该函数：

$('.imageWrapper').html('<img src="whatever_i_need_to_be_here_now.jpg" />');
于 2013-01-15T09:40:50.287 回答