Question

我正在为我的编程概念课程学习Javascript，我决定为我的最终项目制作一个简单的摄影组合网站。我现在正在制作画廊，而且我不确定如何交换图片。

这就是它的样子（切断但你明白了）： screenshot

这是HTML：

<div id="gallery">
 <div>
  <img src="images/nature/1.jpg">
  <br>
  <div class="gallery">
    <img src="images/nature/2.jpg">
    <img src="images/nature/3.jpg">
    <img src="images/nature/4.jpg">
    <img src="images/nature/5.jpg">
    <img src="images/wedding/1.jpg">
    <img src="images/wedding/2.jpg">
    <img src="images/wedding/3.jpg">
    <img src="images/wedding/5.jpg">
    <img src="images/wedding/4.jpg">
  </div>
 </div>
</div>

当你点击.gallery中的img时，如何与第一个img（images / nature / 1.jpg）交换位置？

Answer 1

我认为你的意思是当你点击滑动div时，无论.gallery中显示的是什么图片都会被1.jpg替换。

如果是这种情况，您可以在.gallery上绑定onclick事件，通过获取event object，您可以访问触发事件的源dom元素。

然后你可以使用javascript来改变src属性。

var gallery = document.querySelector('.gallery');
gallery.addEventListener('click', function(e) {
    var targetImg = e.target;
    targetImg.src = 'images/nature/1.jpg';
});

Answer 2

以下内容应该采用当前第一张图片中的任何图片，并将其与所点击的图像交换出来：

var firstImage = document.getElementsByTagName('img')[0],
    gallery = document.getElementsByClassName('gallery')[0];

gallery.addEventListener('click', function(e) {
  var target = e.target;

  if (target.tagName == "IMG") {
    var newImage = target.src;
    target.src = firstImage.src;
    firstImage.src = newImage;
  }
});

您可以在此处测试：https://jsfiddle.net/hxhe90qL/6/

然而，经过足够的点击后，图像可能会全部乱序。您可以将其更改为仅通过将if语句中的代码替换为：

来交换第一个图像

firstImage.src = target.src;

如何用JS进行简单的图像交换？

2 个答案: