javascript - 图像元素在 src 更改时变为空？幻灯片

Question

正在构建一个库，试图放入一个褪色图像 slider ，它显示了第一张图像，但是当它试图改变时我得到 TypeError: document.querySelector(...) is null。任何帮助都会很棒!

 export let styl = (function() {
  let slideIndex = 0;
  return {

    simpleSlideShow: function() {
      //automatic Slider
      let i;
      let slides = document.getElementsByClassName("mySlides");
      console.log("Image change");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) {
        slideIndex = 1;
      }
      slides[slideIndex - 1].style.display = "block";
    },
    slideShowImageSetup: function(timeDelay, id, images) {
      //Building HTML with given array of images
      let i;
      for (i = 0; i < images.length; i++) {
        let elem = document.createElement("img");
        elem.setAttribute("alt", "image");
        elem.setAttribute("src", images[i]);
        elem.setAttribute("class", "mySlides");
        document.querySelector(id).appendChild(elem);
      }
      setTimeout(styl.simpleSlideShow, 1);
      setInterval(styl.simpleSlideShow, timeDelay);
      return 1;
    },
    fadingSlideShow: function(id, images) {
      document.querySelector(id).className += "fadeOut";
      setTimeout(function() {
        document.querySelector(id).src = images[slideIndex];
        document.querySelector(id).className = "";
        slideIndex++;
        if (slideIndex == images.length) {
          slideIndex = 0;
        }
        setTimeout(styl.fadingSlideShow(id, images), 3000);
      }, 1000);
    },
  };
})();

我在哪里调用函数

let images = [
  "https://cdn141.picsart.com/297231911148201.jpg?c256x256",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQIfOEjoaYJNDHGmdgRa8EQp50VCicpK0R_0QpZLftE2zzgJky"
];

styl.fadingSlideShow("#slider", images);

<img id="slider"></img>

制作淡入淡出效果的css

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

#slider.fadeOut {
    opacity: 0;
}

Answer 1

您的第二个 setTimeout 没有将 ID 或图像发送到 styl.fadingSlideShow。

setTimeout(function(){styl.fadingSlideShow(id, images)}, 3000);

此外，将第二个 setTimeout 放在第一个里面。