如何为我的 JS 幻灯片添加淡入淡出效果

How to add a fading effect for my JS slideshow?

本文关键字：淡入 淡出 添加 幻灯片 我的 JS      更新时间：2023-09-26

我有这个幻灯片JS代码，可以根据我们想要的时间在div中切换图像。但是，如何添加淡入/淡出效果而不是没有动画的基本过渡？我在没有jQuery的情况下这样做，只是普通的javascript。这是链接：https://en.khanacademy.org/computer-programming/js-library-exatreojs-slideshow-library/2950604004

这是代码：

var slideShow = function(container, time) {
            container = document.getElementById(container);
            this.images = [];
            this.curImage = 0;
            for (i = 0; i < container.childElementCount; i++) {
                this.images.push(container.children[i]);
                this.images[i].style.display = "none";
            }
            // Handle going to to the next slide
            var nextSlide = function() {
                for (var i = 0; i < this.images.length; i++) {
                    this.images[i].style.display = "none";
                }
                this.images[this.curImage].style.display = "block";
                this.curImage++;
                if (this.curImage >= this.images.length) {
                    this.curImage = 0;
                }
                window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
                // old code: window.setTimeout(nextSlide.bind(this), time);
            };
            nextSlide.call(this);
        
        };
        slideShow("slideshow", 1000);
        // old code: slideShow(document.getElementById("slideshow"), 1000);
    <div id="slideshow">
        <img src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
        <img src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
        <img src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
        <img src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
        <img src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
    </div>

如果您不介意显示总是被阻止并且我只是更改图像的不透明度，您可以尝试此方法。所以容器必须相对定位，imgs应该是绝对的

var slideShow = function(container, time) {
  container = document.getElementById(container);
  this.images = [];
  this.curImage = 0;
  for (i = 0; i < container.childElementCount; i++) {
    this.images.push(container.children[i]);
    this.images[i].style.opacity = 0;
  }
  // Handle going to to the next slide
  var nextSlide = function() {
    for (var i = 0; i < this.images.length; i++) {
      if (i!=this.curImage) this.images[i].style.opacity = 0;
    }
    this.images[this.curImage].style.opacity = 1;
    this.curImage++;
    if (this.curImage>=this.images.length) this.curImage=0;
    window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
    // old code: window.setTimeout(nextSlide.bind(this), time);
  };
  nextSlide.call(this);
};
slideShow("slideshow", 1000);
// old code: slideShow(document.getElementById("slideshow"), 1000);
img {
  transition: opacity 0.5s;
  position:absolute;
  top:0;
}
<div id="slideshow">
  <img src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
  <img src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
  <img src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
  <img src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
  <img src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>

相关文章：