Изображение появляется после задержки на слайдере начальной загрузки

Question

Я все еще новичок в JS и изучаю его.

У меня есть слайдер начальной загрузки с изображениями на каждом слайде.Я хотел бы, чтобы изображения появлялись после небольшой задержки на слайде (слайде, на котором находится указанное изображение).Пока что я сделал это только с первым слайдом, и если я применю свой класс к другим изображениям на слайдах, они появятся, когда документ будет готов, а не на слайде.

Мой JS выглядит так,far:

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

Таким образом, все будет затухать после задержки.Как я могу изолировать fadeIn, чтобы применить его только тогда, когда пользователь идет к указанному слайду?

Извините, если я не на 100% уверен, не стесняйтесь сказать мне.

Answer 1

Я предположил, что вы использовали загрузочную карусель по умолчанию. Я использовал быстрый и грязный метод, чтобы помочь вам понять, что я делаю.

Сначала я выбираю две используемые кнопкидля изменения изображения и помещения их в массив с их циклическим добавлением и добавления функции fadeIn к своему обработчику щелчка, что означает, что при щелчке он будет запускать fadeIn.

Теперь нам нужно определить fadeIn, fadeIn перебирает все изображенияи добавляет класс Fade-In, который будет обрабатывать стили и анимацию, мы добавляем обработчик события 'transitionend', чтобы запускаться, когда анимация останавливается, мы удаляем класс после готовности к следующему выстрелу.

мы можем пойти намногоКроме того, добавив класс только к изображению, которое вступает в переход, мы можем добавить задержку с animation-delay в CSS, но этот базовый пример должен помочь вам найти свой путь.

Используемые вещи:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

Использование CSS для усиления эффекта при загрузке страницы

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>