JS Slider 淡化图像而不是简单的改变答案

【问题标题】：JS Slider fade images instead of simple changeJS Slider 淡化图像而不是简单的改变
【发布时间】：2020-08-17 07:51:37
【问题描述】：

我有一个非常简单的图像滑块，因为我很难找到一个没有添加混乱的...这个响应灵敏且工作正常，由于图像需要一点时间来加载，但这并不是太重要。目前图像只是每次都切换，但是我试图让它们在图像之间淡化？如果有人有任何理想的帮助，请保持直截了当，因为我在这里不知所措，我主要使用基本的 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>

【问题讨论】：

标签： javascript html image slider fade

【解决方案1】：

这个脚本与您目前拥有的并没有太大的不同，而且很简单。为了实现淡入淡出，我添加了一个不透明度为 0 的类（并将当前不透明度设置为 1）。不透明度随 css 过渡而变化（在 javascript 中添加了淡入淡出类）。

我已将图像设置为 javscript 中的数组（这是否适用于您的代码取决于您拥有多少图像，但我猜是因为这是一个简单的示例，您只使用了几个）。我使用了不同大小的占位符图片来演示。

如您所见，javascript 非常简短；循环遍历数组并显示每个图像 3 秒。（演示目的是 8 秒长！）

希望你觉得这很有用。

var myImages = [
    'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg',
    'https://cdn.pixabay.com/photo/2020/11/24/12/23/flowering-dogwood-5772385_960_720.jpg',
    'https://cdn.pixabay.com/photo/2016/12/16/15/25/christmas-1911637_960_720.jpg',
    'https://cdn.pixabay.com/photo/2014/12/21/07/49/fireworks-574739_960_720.jpg',
    'https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_960_720.jpg'
  ],
  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;
  width: 100%;
  height: auto;
}

#slider.fadeOut {
  opacity: 0;
}

&lt;img id="slider" src="http://placehold.it/200x200"&gt;

【讨论】：

顺便说一下，如果您的图像很大并且需要一段时间来加载，请记住压缩它们。像tinypng 这样的网站对于减小图像文件大小很有用