0

我收集了 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>
4

2 回答 2

0

我认为除了 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>
于 2013-07-15T19:28:08.777 回答
0

有一堆 jquery 幻灯片/轮播插件可以满足你的需要。

如果你需要一个片段来做这件事，你可能需要澄清你想要什么。

据我所知，任何时候都应该只有 3 张图像。一个很大，另外两个很小（比如缩略图？）。您想单击一个小图像并让它替换大图像（因此小图像变得与大图像一样大并占据它的位置？）。

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

就像对小孩子解释一样。

于 2013-07-15T04:17:56.580 回答