クリックでフェードをトリガーする方法は？

Question

私はこのJavaScriptファイルを使って、イメージを持つフェードアニメーションを作成しています。しかし、私は、マウスを押したときにのみ動作させるために、マウスのクリック機能をどこに置くべきかを知りません。

注：関数が呼び出されると、ITはclickFade MODEここ

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

ありがとうです！あなたがすることができるならば

は

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

あなたは（これを追加することができます。これは、あなたが何を意味するのかですが、あなたは、「スライドショー」のdivをクリックした後にのみ、スライドショーをトリガするために、このコードを使用することができるかどう

Answer 1

わかりません最後のコード行ではなく、後にjQueryを使用してください）。

それとも、jQueryのなし：

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