单击时切换和替换图像

Switch and replace Images on click

本文关键字：替换 图像 单击      更新时间：2023-09-26

我试图在单击时替换和切换图片，但我的代码得到了堆栈。我可以改变大局，但小局不会改变。

到目前为止，我拥有：

.html

<div class="image_container">
       <a  href="" >
    <img  class="big_image" src="picture1" />
      </a>
</div>
<div class="pics_container">
  <img class="lilla" src="picture2"  />
  <img class="lilla" src="picture3"  />
</div>
   $('.lilla').on('click',function(){
          $('.big_image').attr('src',$(this).attr('src')); 
          $(this).attr('src',$('.big_image').attr('src'));
    })

我想要的是当我单击图片 2 或 3 时，它将代替图片 1，图片 1 将取代点击的图片 2 或 3 .

在我的示例中，小图片可以很好地替换图片 1，但图片 1 没有替换单击的图片。 我错过了什么？

在这里工作演示小提琴

在交换大图像之前，您需要一个变量来存储大图像中的源

$('.lilla').on('click',function(){
      var big_src = $('.big_image').attr('src');
      $('.big_image').attr('src', $(this).attr('src')); 
      $(this).attr('src', big_src);
});

我会在每张图片上应用一个类，然后引用它。因此，在单击功能中，我将执行以下操作。

例

$('#imagereplacing).attr('src',$('.exampleClass').attr('src'));
相关文章：