爲什麼我的事件偵聽器不在函數內部工作？

我有一個函數可以在JavaScript中製作幻燈片。在嘗試添加功能時，如果使用淡入淡出改變幻燈片，我的功能停止工作，它有什麼問題？完整代碼on Khan Academy 爲什麼我的事件偵聽器不在函數內部工作？

var slideShow = function(container, time, effect) { 
 
    container = document.querySelector(container); 
 
    this.images = []; 
 
    this.curImage = 0; 
 

 
    if (effect === "click_fade") { 
 
    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 nextSlideClick = 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); 
 
    }; 
 
    container.addEventListener("click", nextSlideClick) 
 

 
    } 
 

 
    nextSlide.call(this); 
 

 
}; 
 
slideShow("#slideshow", 2000, "click_fade");

.slide { 
 
    transition: opacity 0.5s; 
 
    position: absolute; 
 
    top: 0; 
 
}

<div id="slideshow"> 
 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" /> 
 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" /> 
 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" /> 
 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" /> 
 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" /> 
 

 
</div>

沒有結果，有什麼不好？謝謝！

來源

2016-03-09 FlipFloop

這可能是更好的精確指示你改變什麼，具體是什麼呢/不發生，你採取了哪些調試步驟。我總是對肆意使用這個用法感到警惕，特別是稍後運行的涉及'this'的處理函數。 –

編輯它，去這裏？ https://en.khanacademy.org/computer-programming/js-library-exatreojs-slideshow-library/2950604004 – FlipFloop

你可以嘗試以下方法：

<style> 
    .slide { 
    transition: opacity 0.5s; 
    position: absolute; 
    top: 0; 
} 
</style> 

<div id="slideshow"> 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" /> 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" /> 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" /> 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" /> 
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" /> 
</div> 

<script> 
    var slideShow = function(container, time, effect) { 
    container = document.querySelector(container); 
    this.images = []; 
    this.curImage = 0; 

    if (effect === "click_fade") { 
    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 nextSlideClick = 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(nextSlideClick.bind(document.getElementById(this)), time); 
     }; 
     container.addEventListener("click", nextSlideClick) 

    nextSlideClick.call(this); 
} 
}; 
slideShow("#slideshow", 2000, "click_fade"); 
</script>

在製造這個的jsfiddle一些細微的變化：Here

來源

2016-03-09 14:50:26 h3li0s

沒有爲我工作... – FlipFloop

我已經添加了一個jsfiddle到我的回答 – h3li0s

，但它會自動工作雖然點擊不會做任何事情 – FlipFloop

爲什麼我的事件偵聽器不在函數內部工作？

回答

相關問題