HTML5图片中最简单的图像交叉淡入淡出序列（javascript（和css）[无jquery]

我正试图用HTML5图片标签中的一系列图像制作交叉淡入淡出。问题是1）它获取了页面上的所有图像，2）没有获取WebP图像，这是使用html5图片标签的主要原因。对不起，我的JavaScript技能非常有限。这是我到目前为止得到的：

HTML:

有灯光吗

  <header class="inteiro blk">
    <div class="img crossfade">
      <picture>
        <source srcset="img/universo3.webp" type="image/webp">
        <source srcset="img/universo3.jpg" type="image/jpeg">
        <img src="img/universo3.jpg">
      </picture>
      <picture>
        <source srcset="img/universo2.webp" type="image/webp">
        <source srcset="img/universo2.jpg" type="image/jpeg">
        <img src="img/universo2.jpg">
      </picture>
      <picture>
        <source srcset="img/universo1.webp" type="image/webp">
        <source srcset="img/universo1.jpg" type="image/jpeg">
        <img src="img/universo1.jpg">
      </picture>
    </div>
  </header>

var current = 0,
    slides = document.getElementsByTagName("img");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 3000);

.crossfade img {
  position: absolute;
  transition: opacity .5s ease-in;
}

.crossfade img + .crossfade img { opacity: 0; }