javascript - 使用纯 JavaScript 交换图像 src

Question

如何让mainImage图片跟缩略图换个地方变成imgStyle图片？

我设法将缩略图移动到主图，但我不知道如何将主图移动到缩图。

我很乐意提供任何建议。

var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
  var imgUrl = this.src;
  var mainUrl = document.getElementById('mainImage');      
  mainUrl.src = imgUrl;
});

.add_gallery{
  width: 25%;
}
#mainImage{
  width: 100%;
}
.miniatures{
  width: 100%;
  display: flex;
}
.imgStyle{
  height: 100px;
}

<div class="add_gallery">
        <div class="galery">
          <img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
          <br />
        </div>
          <div class="miniatures">
            <img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
            <img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
            <img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
            <img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
          </div>                
      </div><!--add_gallery-->

Answer 1

差不多就搞定了，设置之前把被点击的小图src设为主图src就行了。

var mini = document.getElementsByClassName('imgStyle');
for(var i = 0; i < mini.length; i++)
mini[i].addEventListener('click', function(e){
  var imgUrl = this.src;
  var mainUrl = document.getElementById('mainImage');
  this.src = mainUrl.src;
  mainUrl.src = imgUrl;
});

.add_gallery{
  width: 25%;
}
#mainImage{
  width: 100%;
}
.miniatures{
  width: 100%;
  display: flex;
}
.imgStyle{
  height: 100px;
}

<div class="add_gallery">
 <div class="galery">
<img id="mainImage" src="https://thumbs.dreamstime.com/z/obsługuje-brać-obrazek-selfie-z-jego-smartphone-w-górach-zdjęcie-ruchomej-55632576.jpg" />
<br />
</div>
<div class="miniatures">
<img class="imgStyle" src="http://www.grhnarew.fora.pl/images/galleries/3876491244c9e14053175d-428229-wm.jpg">
<img class="imgStyle" src="http://sekretystronwww.pl/wp-content/uploads/2015/11/temat2015m_2.jpg">
<img class="imgStyle" src="http://www.bordercollie.fora.pl/images/galleries/1287702814bfa931698357-712854-wm.jpg">
<img class="imgStyle" src="https://img-ovh-cloud.zszywka.pl/0/0000/6629-cudowny-obrazek.jpg">
</div>            
</div>