jquery图片更改和开关位置

jquery图片更改和开关位置,jquery,web,switch-statement,Jquery,Web,Switch Statement,嗨,我正在做一个有4张图片的示例站点,有一张默认图片,它是最大的图片,当我单击第二张图片时,第二张图片将是该位置的图片,第一张图片将位于第二张图片位置。第三张图片和第四张图片也是如此。如何在jquery中实现这一点提前感谢那些想要帮助的人…这是您的完整解决方案!;) JavaScript: $(document).ready(function() { $('img.prodSmallPic').click(function() { var tmpObjSrcBig = $

嗨,我正在做一个有4张图片的示例站点,有一张默认图片,它是最大的图片,当我单击第二张图片时,第二张图片将是该位置的图片,第一张图片将位于第二张图片位置。第三张图片和第四张图片也是如此。如何在jquery中实现这一点提前感谢那些想要帮助的人…

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

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:


在线演示:


希望这有帮助

你试过什么了吗?我已经在网上搜索了将近2个小时了,到目前为止还没有什么…你需要解释清楚,这样我才能看一看。谢谢你的帮助。。。这正是我所要寻找的:Dim在图片切换中有问题,您提供的站点生成正确的流程。。。但是当我尝试它时,当我点击小图片时,大图片就会消失。。。我试图复制和粘贴所有的代码,但它仍然产生相同的输出…我不能确切地理解你的问题是什么。你能解释一下吗?不,它解决了问题,是我通往图片的路径:再次是D thnx
<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" />