jquery图片更改和切换位置

Question

嗨，我正在做一个示例网站，有4张图片，有一个默认图片，它是最大的图片，当我点击第二张图片时，第二张图片将是那个位置，第1张图片将位于第2张图片位置。第3张照片和第4张照片也是一样。我如何在jquery中预先感谢那些想要帮助的人...

Answer 1

这是您的完整解决方案！ ;）

的JavaScript：

$(document).ready(function() { 
    $('img.prodSmallPic').click(function() { 
     var tmpObjSrcBig = $('img.prodBigPic').attr('rel'); 
     var tmpObjSrcSmall = $(this).attr('rel'); 

     $('a[id="' + $(this).attr('rel') + '"]').attr('id', tmpObjSrcBig); 

     $('img.prodBigPic').fadeOut(200, function() { 
      $('img.prodBigPic').attr('src', 'big_' + $(this).attr('rel')); 
      if (this.complete) $(this).fadeIn(200); 
     }); 
     $(this).fadeOut(200, function() { 
      $(this).attr('src', 'tn_' + tmpObjSrcBig); 
      if (this.complete) $(this).fadeIn(200); 
     }); 

     $('img.prodBigPic').attr('rel', tmpObjSrcSmall); 
     $(this).attr('rel', tmpObjSrcBig); 
    }); 
}); 

HTML：

<img src="big_11886333_1.jpg" border="0" class="prodBigPic" rel="11886333_1.jpg" /> 

<img src="tn_11886333_2.jpg" class="prodSmallPic" border="0" rel="11886333_2.jpg" /> 
<img src="tn_11886333_3.jpg" class="prodSmallPic" border="0" rel="11886333_3.jpg" /> 

在线演示：http://jsfiddle.net/8xmLM

希望这有助于！