如何通過點擊觸發淡化？

所以我有這個JavaScript文件，使圖像漸變動畫。但是，我不知道要在何處放置鼠標點擊功能才能使其在按下鼠標時才起作用。如何通過點擊觸發淡化？

注：函數調用時，IT需要在clickFade模式

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

 
    if (effect === "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 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); 
 
    }; 
 
    nextSlide.call(this); 
 
    } else if (effect === "clickFade") { 
 
    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); 
 
    }; 
 
    nextSlideClick.call(this); 
 
    } 
 

 
}; 
 
slideShow(".slideshow", 2000, "clickFade");

h1 { 
 
    font-family: 'Montserrat', sans-serif; 
 
} 
 

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

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
 

 
<h1>Exatreo.js - Slideshow library</h1> 
 

 
<div class="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>

這裏是CodePen

謝謝！

來源

2016-11-13 FlipFloop

能否請你澄清你想擁有怎樣呢？ EG，你想要點擊圖片來觸發相同圖片的淡入淡出動畫嗎？或者你的意思是在其他地方點擊？ –

@MattMorgan我想單擊圖像，然後淡入另一個。我希望很清楚 – FlipFloop

不知道這是你的意思，但你可以使用此代碼觸發幻燈片單擊「幻燈片放映」分區後，才：

$('.slideshow').on('click', function() { 
    slideShow(".slideshow", 2000, "clickFade"); 
});

您可以添加這個（如果你能使用jQuery），而不是最後一行代碼。

或者沒有jQuery的：

document.getElementsByClassName("slideshow")[0].addEventListener("click", function() { 
    slideShow(".slideshow", 2000, "clickFade"); 
});

來源

2016-11-13 21:59:34 acostache

如何通過點擊觸發淡化？

回答

相關問題