如何通过点击触发淡化？

所以我有这个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

如何通过点击触发淡化？

回答

相关问题