jquery图片更改和切换位置

时间:2012-08-09 15:03:13

标签: jquery web switch-statement

你好我正在做一个有4张照片的样本网站,有一张默认图片,它是最大的图片,当我点击第二张图片时,第二张图片将是那个位置的那张,第一张图片将是在第二个图片位置。同样在第3张照片和第4张照片中也是如此。我怎样才能在jquery中做到这一点,提前感谢那些想要帮助的人...

1 个答案:

答案 0 :(得分:2)

这是您完整的解决方案! ;)

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

希望这有帮助!