javascript 图像交换影响太多图像

Question

我收集了 3 张图片，两张小一张大。我喜欢被设置为当你点击一张小图片时，它会取代大图片。问题是我收集了这三张图片中的三张，因此当您单击一张小图片时，它会占据所有三张大图片的位置。有什么建议可以让它只占据其部分中大图像的位置吗？这是一些代码。谢谢!

$(document).ready(function(){
        $('img').click(function(){
        var url = $(this).attr('src');
        $(this).parents('.picture-container').find('.large-picture > img').attr('src', url);
        $('.large-picture > img').attr('src', url);
        $(this).attr('src', bigUrl);
        });
        });

图片部分(一共有三个)

   <div class = 'picture-container'>
        <div class = 'large-picture' style = 'width:50%;height:100%;float:left;'>
            <img src = 'close_table_dupontstudios.png' width = '100%' height = '100%'>
        </div>
        <div class = 'picture-content' style = 'float:right;width:45%;height:100%;'>
            <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-wrapper'>
                <div class = 'small-picture' style = 'float:left;height:100%;'>
                    <img src = 'hair_and_makeup_dupontstudios.png' width = '100%' height = '100%'>
                </div>
                <div class = 'small-picture' style = 'float:right;height:100%;'>
                    <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                </div>
            </div>
        </div>
    </div>

Answer 1

有一堆 jquery 幻灯片/轮播 plugins那应该做你需要的。

如果您需要一个片段来完成这件事，您可能需要阐明您想要什么。

据我所知，任何时候都应该只有 3 张图片。一个很大，另外两个很小(像缩略图？)。您想要点击一个小图像并让它替换大图像(这样小图像就会变得和大图像一样大并占据它的位置？)。

将大图像缩小并替换刚刚选择的图像。

就像对 child 解释一样。