javascript和css中HTML5图片中最简单的淡入淡出图像序列[没有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>

JavaScript：

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

CSS：

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

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

有光吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript slideshow