JS滑块淡化图像而不是简单的改变。

Question

我有一个非常简单的图像滑块，因为我努力寻找一个没有添加混乱... ... 这个是响应式的，而且效果还不错，因为图片的缘故，加载需要一点时间，但这不是太重要。目前，图像只是每次切换过来，然而我正试图让它们在图像之间淡化？如果有人能提供任何帮助，那将是最理想的，请保持相当直接的方式，因为我在我的头上，我的工作主要是基本的HTML和PHP。

这就是我所拥有的。

.slides {
  width: 100%;
}

.slides-hidden {
  display: none;
}

<script>
  addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
    var index = 0;
    const slides = document.querySelectorAll(".slides");
    const classHide = "slides-hidden",
      count = slides.length;
    nextSlide();

    function nextSlide() {
      slides[(index++) % count].classList.add(classHide);
      slides[index % count].classList.remove(classHide);
      setTimeout(nextSlide, 8000);
    }
  });
</script>




<section>
  <img class="slides slides-hidden" src="indexslider/1.png" alt="1">
  <img class="slides slides-hidden" src="indexslider/2.png" alt="2">
  <img class="slides slides-hidden" src="indexslider/3.png" alt="3">
  <img class="slides slides-hidden" src="indexslider/4.png" alt="4">
  <img class="slides slides-hidden" src="indexslider/5.png" alt="5">
</section>

Answer 1

这个脚本和你目前的脚本没有大的区别，而且很简单。为了实现渐变，我添加了一个不透明度为0的类（并将当前不透明度设置为1）。不透明度会随着css的过渡而改变（在javascript中添加了淡入淡出类）。

我在javscript中把图片设置为一个数组（这对你的代码是否可行取决于你有多少图片，但我猜测，因为这是一个简单的例子，你只用了几个）。我使用了不同大小的占位图来演示。

正如你所看到的，javascript很短很简单；循环浏览数组并显示每张图片3秒。(为了演示的目的，8秒已经很长了！)

希望你觉得这很有用。

var myImages = [
    'http://placehold.it/300x200',
    'http://placehold.it/300x150',
    'http://placehold.it/400x250'
  ],
  curIndex = 0;
imgShow = 3000; /*yours is 8 secs, but for demo purposes, 3 secs is shorter!*/

function playSlides() {
  document.getElementById('slider').className += "fadeOut";
  setTimeout(function() {
    document.getElementById('slider').src = myImages[curIndex];
    document.getElementById('slider').className = "";
  }, 1000);
  curIndex++;
  if (curIndex == myImages.length) {
    curIndex = 0;
  }
  setTimeout(playSlides, imgShow);
}
playSlides();

#slider {
  opacity: 1;
  transition: opacity 1s;
}

#slider.fadeOut {
  opacity: 0;
}

<img id="slider" src="http://placehold.it/200x200">