Question

我收集了3张图片，两张小图片。我喜欢设置id，所以当你点击一个小图片时，它取代了较大的图像。问题是我有三个这三个图像的集合，所以当你点击一个小图像时，它会占据所有三个大图像的位置。获得它的任何建议只需要在其部分中找到大图像的位置？这是一些代码。谢谢！

$(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张图片。一个很大，另外两个很小（比如缩略图？）。您想要点击一个小图像并让它替换大图像（这样小图像就像大图像一样大并占据它的位置？）。

然后缩小大图像并取代刚刚选择的图像。

就像你对一个小孩子那样解释它。

Answer 2

我认为除了img src之外我没有更改html中的任何内容，所以这应该有效：

 <script>

       $(document).ready( function(){

          $(".small-picture > img").click( function(){ 

              var small_img = $(this);
              var small_img_src = small_img.attr("src"); 

              var img_container = small_img.closest(".picture-container");

              var large_img = img_container.find(".large-picture > img");
              var large_img_src = large_img.attr("src");

              large_img.attr("src", small_img_src);
              small_img.attr("src", large_img_src);

         });
     });


    </script>

javascript图像交换影响太多图像

2 个答案: