Question

我正在构建一个简单的html / css / vanilla js组件来显示图像。我在顶部有图像列表，当我点击其中一个图像时，它必须出现在主容器中。为此，我只需更改img元素src：

document.addEventListener('DOMContentLoaded', (event) => {

    var mainImg =               document.getElementById("mainImg");
    var thumbnailContainer =    document.getElementById("thumbnailContainer");

    thumbnailContainer.addEventListener("click", (event) => {

        var linkClicked =       event.target.currentSrc;
        mainImg.src =           linkClicked;

    });
});

现在我想添加一些动画，但我在使用css transition时遇到了一些问题，这是我的html：

<div class="container">
    <img id="mainImg" src="xxxxx" alt="car 2"/>
   <div id="thumbnailContainer" class="thumbnailContainer">
      <div class="thumbnail">
          <img src="xxxxx" alt="car 2"/>
      </div>
      <div class="thumbnail">
          <img src="xxxxxx" alt="car 2"/>
      </div>
      <div class="thumbnail">
          <img src="xxxxxx" alt="car 2"/>
      </div>
      <div class="thumbnail">
          <img src="xxxxxx" alt="car 2"/>
      </div>
  </div>
</div>

让我烦恼的是我单击以触发转换的元素不需要更改，但我只是用JS更改主图像上的src属性。

我该如何解决这个问题？

使用vanilla js动画src图像变化

0 个答案: