Question

我有一个带有四个缩略图和四个大图像的基本图像库，其中一个显示，我希望能够点击每个缩略图并将活动的大图像替换为相应的大图像，然后点击之前我能够更改源的单个部分，如下所示，但此选项将不再起作用，因为我不能再依赖于图像的src：

jQuery('#thumbs').delegate('img','click', function() {
    jQuery('#panel img').attr('src', jQuery(this).attr('src').replace('99_99','600_399'));
});

我已将四个图像和缩略图中的每一个动态添加到两个数组中：

var large_photos = jQuery('#panel').find('img').map(function(){
    return jQuery(this).attr('src');
}).get();

var thumbnails = jQuery('#thumbs').find('img').map(function(){
    return jQuery(this).attr('src');
}).get();

如何修改脚本以便我可以点击缩略图并显示较大的图像？

HTML：

<div id="panel">
    <img src="/cache/data/691294/IMGP1617_600_399_s_c1.JPG" alt="" width="600" height="399" />
    <img src="/cache/data/691294/IMGP1618_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" />
    <img src="/cache/data/691294/IMGP1619_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" />
    <img src="/cache/data/691294/IMGP1620_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" />
</div>

<div id="thumbs">
    <img src="/cache/data/691294/IMGP1617_99_99_c1.JPG" alt="" width="99" height="99" />
    <img src="/cache/data/691294/IMGP1618_99_99_c1.JPG" alt="" width="99" height="99" />
    <img src="/cache/data/691294/IMGP1619_99_99_c1.JPG" alt="" width="99" height="99" />
    <img src="/cache/data/691294/IMGP1620_99_99_c1.JPG" alt="" width="99" height="99" />
</div>

Answer 1

这使用单击的拇指的索引将类添加到大图像的相应索引。

$('#thumbs img').click( function() {
    var thumbindex = $(this).index();
    $('.active').removeClass('active');
    $('#panel img').eq(thumbindex).addClass('active');
});

带缩略图的基本jQuery图库

1 个答案: