javascript圖像交換影響太多圖像

我得到了3個圖像的集合，兩個小圖像大。編號喜歡設置，所以當你點擊一個小圖像時，它會代替較大的圖像。問題是，我收集了這三個圖像中的三個，所以當你點擊一個小圖像時，它會拍攝所有三個大圖像。有關獲取它的任何建議，只需在其部分中顯示大圖像的位置？這裏有一些代碼。謝謝！javascript圖像交換影響太多圖像

$(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>

來源

2013-07-15 nictoriousface

還有一堆jQuery的幻燈片/旋轉木馬plugins了應該做您的需要。

如果你需要一個片段來做這件事，你可能需要澄清你想要的東西。

從我收集的信息來看，任何時候應該只有3張圖片。一個很大，另外兩個很小（像縮略圖？）。你想點擊一個小圖像，並取代大圖像（所以小圖像變得像大圖像一樣大，並把它的位置？）。

將大圖像縮小然後取代剛剛選擇的圖像。

只要解釋它就像你會對一個小孩。

來源

2013-07-15 04:17:56

你得完全正確。被點擊的小圖像代替大圖像，大圖像代替被點擊的小圖像。但是，這些部分有三個部分，我希望它是在一個部分中點擊一個小圖像將採取同一部分的大圖像，而不是所有的部分。 – nictoriousface

我不認爲我比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-15 19:28:08

javascript圖像交換影響太多圖像

回答

相關問題