3

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

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

ВАЖНО!: Пожалуйста чистый JS, я так понимаю это должна делать функция setTimeout, но не понимаю как.

var slideWidth = 300;
var sliderList = document.querySelector('.slider__list');
var slides = document.querySelectorAll('.slider__item');
var btnPrev = document.querySelector('#prev_slide');
var btnNext = document.querySelector('#next_slide');
var pos = 0;

sliderList.style.width = slides.length * slideWidth + 'px';

btnPrev.onclick = scrollToPrev;
btnNext.onclick = scrollToNext;

function scrollToPrev() {
  pos--;
  if (pos < 0) {
    var children = sliderList.children;

    sliderList.style.transition = null;
    sliderList.style.left = -(pos + 2) * slideWidth + 'px';
    sliderList.insertBefore(children[slides.length - 1], children[0]);
    pos++;
  }
  requestAnimationFrame(function() { //ожидаем следующего запланированного reflow/repain;
    requestAnimationFrame(function() {
      //предыдущий reflow рассчитал новый dom элемент
      //можно делать анимацию.
      sliderList.style.transition = 'left 0.6s ease-in-out';
      sliderList.style.left = -(slideWidth * pos) + 'px';
    })
  });
}

function scrollToNext() {
  pos++;
  if (pos > slides.length - 1) {
    sliderList.style.transition = null;
    sliderList.style.left = -(pos - 2) * slideWidth + 'px';
    var cloneElem = sliderList.children[0].cloneNode(true);
    sliderList.appendChild(cloneElem);
    sliderList.removeChild(sliderList.children[0]);
    pos--;
  }
  requestAnimationFrame(function() { //ожидаем следующего запланированного reflow/repain;
    requestAnimationFrame(function() {
      //предыдущий reflow рассчитал новый dom элемент
      //можно делать анимацию.
      sliderList.style.transition = 'left 0.6s ease-in-out';
      sliderList.style.left = -(slideWidth * pos) + 'px';
    })
  });

}
.slider {
  width: 300px;
  margin: 50px auto;
}

.slider__container {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.slider__list {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100px;
  list-style: none;
}

.slider__item {
  float: left;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 100px;
  box-sizing: border-box;
  background-color: #eee;
  border: 2px solid black;
  border-radius: 5px;
}

.slider__arrows {
  width: 300px;
  text-align: center;
  margin: 15px auto
}

.slider__arrow {
  font-size: 16px;
  font-weight: bold;
  color: black;
  margin: 0 10px;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div class="slider">
    <div class="slider__container">
      <ul class="slider__list" data-current="0">
        <li class="slider__item">Слайд 1</li>
        <li class="slider__item">Слайд 2</li>
        <li class="slider__item">Слайд 3</li>
        <li class="slider__item">Слайд 4</li>
        <li class="slider__item">Слайд 5</li>
      </ul>
    </div>
    <div class='slider__arrows'>
      <button class='slider__arrow' id="prev_slide">Назад</button>
      <button class='slider__arrow' id="next_slide">Вперед</button>
    </div>
  </div>
</body>

</html>

1 ответ 1

2

Одно из простых решений это включать и выключать флаг обозначающий проигрывание анимации. Например

btnPrev.onclick = scrollToPrev;
btnNext.onclick = scrollToNext;

var animationInProgress = false;

function scrollToPrev() {
  // не обрабатываем нажатия, если анимация проигрывается
  if (animationInProgress) {
    return false;
  }

  /* ... */
  
  // запуск анимации
  sliderList.style.transition = 'left 0.6s ease-in-out';
  sliderList.style.left = -(slideWidth * pos) + 'px';
  
  // установка флага
  animationInProgress = true;
  // когда анимация закончится флаг нужно снять
  setTimeout(function(){ animationInProgress = false; }, 600);
  
  /* ... */
}

1
  • Спасибо, то что нужно!
    – RIM
    24 дек 2017 в 8:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.