Question

如何使用缩略图使mainImage图片更改位置并成为imgStyle图片？

我设法将缩略图移动到mainImage图片，但我不知道如何将主图片移动到微缩模型。

我很高兴任何建议。

＆＃13;

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;
});

＆＃13;

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

＆＃13;

<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-->

＆＃13;

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>

使用纯JavaScript交换图像src

1 个答案: