javascript - 在2张图像之间循环淡入和淡出

我看了一些已经发布的答案，但是没有找到正确的方法。
我在同一div中有2张图像，一个可见，另一个设置为display:none;
我想要2个图像之间的无休止循环，并具有淡入/淡入效果，而没有任何jQuery插件。

我认为，这只是几行代码。

最佳答案

优雅而简单的方式：

function fadeShow(fadeTime, fadeDelay) {
  var $topImage = $("#fadeBox img:last");
  $topImage.fadeTo(fadeTime, 0, function() {
    $topImage.fadeTo(fadeDelay, 0, function() {
      $topImage.fadeTo(0, 1);
      $topImage.insertBefore("#fadeBox img:first");
      fadeShow(fadeTime, fadeDelay);
    });
  });
}

fadeShow(2000, 5000);

#fadeBox {
  position: relative;
}

#fadeBox img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fadeBox">
  <img src="https://lh5.googleusercontent.com/-vp16kljkPwg/AAAAAAAAAAI/AAAAAAAAAKg/Ypz8rdBRFjQ/s200-c/photo.jpg">
  <img src="https://lh5.googleusercontent.com/-uQqDiQ92aZQ/TiZspaC99wI/AAAAAAAAAFE/KZU_RIKUfTI/s200-c/photo.jpg">
</div>

View on JSFiddle

支持多张图像，但是它们必须全部相同。
玩得开心。 :)