如何爲我的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幻燈片添加淡化效果？

回答

相關問題