7

我有一个大图像和一个小拇指，我正在尝试相互交换他们的 src。在这里，我在bottleWrapper img 中更改 thumb img，但我想交换他们的 src。请帮忙！

HTML

<div class="bottlesWrapper">
  <img src="bottle1.png" />
</div>

<div class="thumbs">
   <img src="bottle2.png" />
</div>

脚本

<script>
$('.thumbs a').each(function() {
    $(this).click(function() {
       var aimg = $(this).find("img")

      $('.bottlesWrapper img').fadeOut('fast',function(){
         $(this).attr('src', $(aimg).attr('src')).fadeIn('fast');
      });

    });
});
</script>

编辑

谢谢大家:)

我实际上忘记给出一个我有各种拇指的信息，这个答案最适合！感谢大家的宝贵意见！

$('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});
4

4 回答 4

6

要交换图像，请执行以下操作：

LIVE DEMO

$('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});

如果您有多个“画廊”，请喜欢：http: //jsbin.com/asixuj/5/edit

于 2013-03-29T06:10:52.373 回答
3

你的问题中没有<a>标签..所以假设它img..点击拇指img ..bottlesWrapper将被交换..

试试这个

更新

 $('.thumbs img').click(function() {
   var img=$(this).attr('src');

  $('.bottlesWrapper img').fadeOut('fast',function(){
     $(this).attr('src', img).fadeIn('fast');
  });

  $(this).fadeOut('fast',function(){
     var bottlersImg=$('.bottlesWrapper img').attr('src');
     $(this).attr('src', bottlersImg).fadeIn('fast');
  });

});

注意：并且您不需要each循环... jquery 通过使用类选择器来解决这个问题..

于 2013-03-29T06:10:56.653 回答
1

尝试：

$('.thumbs img').click(function() {
    var img_src = img.attr('src');

    $(this).fadeOut('fast',function(){
      $(this).attr('src', $('.bottlesWrapper img').attr('src')).fadeIn('fast');
    });

    $('.bottlesWrapper img').fadeOut('fast',function(){
       $(this).attr('src', img_src ).fadeIn('fast');
    });
});

您应该将点击事件附加到类img内的标签thumbs，然后更改图像源。

于 2013-03-29T06:10:08.653 回答
1

由于您的<a>代码中没有标签，因此根本无法使用.thumb，请尝试单击其.thumb本身：

$('.thumbs').click(function() {
    var thumbsimgSrc = $(this).find("img").attr('src');
    var bottleImgSrc = $('.bottlesWrapper img').attr('src');

    $(this).find("img").attr('src', bottleImgSrc);

    $('.bottlesWrapper img').fadeOut('fast').promise().done(function(){
       $(this).attr('src', thumbsimgSrc).fadeIn('fast');
    });
  });
});

is 本身就是一个集合，.thumb因此您不需要遍历.each()方法。

于 2013-03-29T06:16:14.593 回答