如何为我的JS幻灯片添加淡化效果？

我有这个幻灯片JS代码，根据我们想要的时间在div中切换图像。但是，如何添加淡入/淡出效果而不是没有动画的基本转场？我这样做没有jQuery，只是简单的JavaScript。这里是链接：https://en.khanacademy.org/computer-programming/js-library-exatreojs-slideshow-library/2950604004 如何为我的JS幻灯片添加淡化效果？

这里是代码：

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>

来源

2016-03-05 FlipFloop

要添加淡入你需要用一个定时器，逐步提高新形象的不透明度从0到1。所以可能需要将两幅图像完全放置在一起，具有较低z-索引的图像将被具有较高z-索引的另一幅图像替换，并且该图像将是不透明度动画。 –

谢谢！让我走上正轨！ – FlipFloop

另外，你可能会想要通过一个循环来逐渐淡入/淡出，这个循环包含一个setTimeout调用，以实现淡入淡出的实际代码。在循环的每次迭代中，setTimeout会在调用执行淡入淡出的函数之前创建一个小延迟。这样，不透明度的变化就不会一次发生。 –

你可以试试这个方法，如果你不介意的显示总是堵塞，我只是改变透明度的形象。因此，容器必须是相对定位和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>

来源

2016-03-06 21:17:37

这真棒！非常感谢！ – FlipFloop

如果我想淡入淡出，是否可以制作“选项”？当然是 – FlipFloop

。通过转换实现的这种淡入淡出效果：0.5s。所以你可以创建一个按钮来添加转换为0的类;到幻灯片中的每一个元素，并且不会有淡入淡出的效果 –

如何为我的JS幻灯片添加淡化效果？

回答

相关问题