在引导滑块延迟后出现图像。
我对JS还是很陌生的，而且还在学习。
我有一个引导滑块，每一张幻灯片上都有图像。我想要做的是，在幻灯片(该图片所在的幻灯片)出现一个小延迟后，图像出现。到目前为止，我只使用了第一张幻灯片，如果我将类应用于幻灯片上的其他图像，它们将在文档准备好而不是幻灯片上出现时出现。
到目前为止，我的JS看起来是这样的：
$(document).ready(function() {
$('.foo').hide().delay(1).fadeIn(2200);
});因此，一切都会在拖延之后消失。只有当用户转到该幻灯片时，我才能隔离fadeIn以应用它？
对不起，如果我没有100%清楚，请随时告诉我。
回答 1
Stack Overflow用户
发布于 2018-05-26 13:32:25
我假设您使用了默认的引导旋转木马，我也使用了一个快速而肮脏的方法，帮助您理解我正在做的事情。
首先，我选择了两个用于更改图像的按钮，并将它们放在一个数组中，对它们进行循环，并将fadeIn函数添加到其on处理程序中，这意味着当它单击时将触发fadeIn。
现在我们需要定义fadeIn，fadeIn遍历所有图像并添加类淡出-在其中我们将处理样式和动画，我们添加了一个事件处理程序“transitionend”，当动画停止时，我们在准备好下一个火后删除类。
我们可以更进一步，确保将类添加到即将过渡的图像中，我们可以在css中添加animation-delay延迟，但这个基本示例将帮助您找到自己的方法。
所用物品：
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick Using CSS for fade-in effect on page load https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
const next = document.querySelector('.carousel-control-next');
const prev = document.querySelector('.carousel-control-prev');
const images = document.querySelectorAll('.carousel-item');
const buttons = [next, prev];
buttons.forEach(el => {
el.onclick = fadeIn
});
function fadeIn() {
images.forEach(image => {
image.classList.add('fade-in');
image.addEventListener('transitionend', (e) => image.classList.remove('fade-in'));
});
}.fade-in {
-webkit-animation: fadein 4s;
animation: fadein 4s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://via.placeholder.com/350x150" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
https://stackoverflow.com/questions/50543039
复制相似问题
腾讯云开发者
