如何通過點擊觸發淡入淡出？

Question

因此，我有一個JavaScript文件，可以使圖像帶有淡入淡出的動畫。 但是，我不知道在何處放置鼠標單擊功能以使其僅在按下鼠標時才起作用。

注意： clickFade功能后，需要將其設置為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

謝謝！

Answer 1

不確定這是否是您的意思，但是只有在單擊“ slideshow” div后，才能使用此代碼觸發幻燈片：

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

您可以在后面添加代碼（如果可以使用jQuery），而不是最后一行代碼。

或者，沒有jQuery：

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