javascript与较大图像交换缩略图

我对网络编程很陌生，现在正在一个网站上工作。在这个网站的一部分，我收集了3张图片。1个较大的一个和下面两个较小的缩略图。我们的目标是创造一种方式，我可以点击其中一个缩略图，他们交换一个大图片的斑点。你知道我该怎么做吗？这是一段代码。谢谢

<div class = 'picture-container'>
            <div class = 'large-picture' id = 'lp1'>
                <figure style = 'float:left;width:45%;'>
                    <img src = 'close_table_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
                    <figcaption class = 'red-cap'>Our Set-Up</figcaption>
                </figure>
                <div class = 'picture-content'>
                    <div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                    <div class = 'picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
                    <!--<div class = 'small-picture'>
                        <img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
                    </div>
                    <div class = 'small-picture'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
                    </div>-->
                </div>
                <div class = 'thumbnail-container'>
                    <figure class = 'thumbnail'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                    </figure>
                    <figure class = 'thumbnail'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                    </figure>
                </div>
            </div>
        </div>

我们的组织
精品制作工作室
我们建立了一个精品的全方位服务制作工作室，允许一人、两人和三人进行电影采访和对话。我们有摄影棚灯光、三个摄像头设置和远程监控。此外，我们的无限墙创造了一个干净和专业的外观，使电影是关于信息。

解决这个问题的方法有很多。最简单的方法是转储所有图像（大小），一次只显示一个

因此，在源代码中，除第一个图像外，所有大图像都将有一类

隐藏

，这使得它们

显示：无

。然后，单击缩略图时，只需显示正确的大图像

要显示正确的大图像，需要通过标识符将缩略图与大图像相关联。下面是将缩略图链接的href设置为大图像id的示例

<a href="#lp1">
  <figure class="thumbnail">...</figure>
</a>

因此，最简单的方法是隐藏/显示，但这并不是最有效的方法。它使客户端加载所有图像，即使它们是隐藏的

更有效的方法是在缩略图中添加

data-

属性，并在缩略图单击处理程序中使用单击的缩略图中的数据更新大内容区域。要“替换”图像，只需替换

src

属性

// preselect all large images
var largeImages = $('figure.large');
// add handler for thumbnail clicks
$('.thumbnail-container').on('click', 'a', function (e) {
    e.preventDefault();
    var thumbnailLink = $(this),
        selectedLarge = $(thumbnailLink.attr('href'));
    // hide all the large images
    largeImages.addClass('hidden');
    // show the large image that corresponds to the clicked thumbnail
    selectedLarge .removeClass('hidden');
});