Question

我还是JS的新手并且学习它。

我有一个自举滑块，每张幻灯片上都有图像。我想要做的是在幻灯片上的小延迟（图像所在的幻灯片）之后使图像出现。到目前为止，我只使用第一张幻灯片制作它，如果我将我的课程应用于幻灯片上的其他图像，它们将在文档准备好而不是幻灯片时显示。

我的JS到目前为止看起来像这样：

$(document).ready(function() { 
  $('.retard').hide().delay(1).fadeIn(2200); 
});

因此，一切都将在延迟后消失。如何在用户转到上述幻灯片时隔离fadeIn以应用它？

对不起，如果我不是100％清楚，请随时告诉我。

Answer 1

我已经假设你已经使用了默认的自助式旋转木马，我已经走了一个快速而肮脏的方法，也帮助你理解我在做什么。

首先，我选择用于更改图像的两个按钮，并将它们放在一个循环上的数组中，并将fadeIn函数添加到其点击处理程序中，这意味着当它点击它时将触发fadeIn。

现在我们需要定义fadeIn，fadeIn遍历所有图像，并添加类淡入，它将处理样式和动画，我们添加一个事件处理程序＆transition;＆nbsp;＆＃39;当动画停止时触发我们在准备好下一次射击后移除该类。

我们可以比这更进一步确保将类添加到即将转换的图像中我们可以在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

＆＃13;

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'));
  });
}

＆＃13;

.fade-in {
  -webkit-animation: fadein 4s;
  animation: fadein 4s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<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>

＆＃13;

在自举滑块延迟后出现图像

1 个答案: