Как вызвать выцветание щелчком?

Question

Итак, у меня есть этот файл JavaScript, который делает замирание анимации с изображениями. Однако я не знаю, где поставить функцию щелчка мыши, чтобы она работала только при нажатии мыши.

ПРИМЕЧАНИЕ: Когда функция вызывается, она должна быть в 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

Не уверен, если это то, что вы имели в виду, но вы можете использовать этот код для запуска слайд-шоу только после нажатия на кнопку «слайд-шоу» DIV:

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

Вы можете добавить это (если вы в состоянии используйте jQuery), вместо вашей последней строки кода.

Или без JQuery:

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