在进度条上停止循环

Question

我正在使用这个进度条： https ://codepen.io/thegamehasnoname/pen/JewZrm

我遇到的问题是它循环，我想要实现的是：

• 停止在最后一张进度幻灯片上（停止循环）。

• 如果用户在进度条停止后位于最后一张幻灯片上，并且我单击按钮，则它应该从上一张幻灯片开始，而不是进度条的第一张幻灯片。.button-prev

这是代码：

// swiper custom progressbar

const progressContainer = document.querySelector('.progress-container');

const progress = Array.from(document.querySelectorAll('.progress'));

const status = document.querySelector('.status');

const playNext = (e) => {

  const current = e && e.target;

  let next;

  if (current) {

    const currentIndex = progress.indexOf(current);

    if (currentIndex < progress.length) {

      next = progress[currentIndex+1];

    }

    current.classList.remove('active');

    current.classList.add('passed');

  }

  if (!next) {

    progress.map((el) => {

      el.classList.remove('active');

      el.classList.remove('passed');

    })

    next = progress[0];

  }

  next.classList.add('active');

}

progress.map(el => el.addEventListener("animationend", playNext, false));

playNext();

我尝试添加这个：

if (current) {

   if (!next) {

     $('.progress-container div').addClass('passed');

   }

}

但是该类passed被删除并且进度条再次开始。

这是我的js previous button：

$(document).on('click', ".button-prev", function() {

  $('.progress-container div.active').prev().removeClass('passed').addClass('active');

  $('.progress-container div.active').next().removeClass('active');

});

关于如何实现这一目标有什么想法吗？

Answer 1

你几乎已经解决了！只需添加一个 return 语句即可避免将活动调用设置为第一个进度元素。if (current) {&nbsp; &nbsp; const currentIndex = progress.indexOf(current);&nbsp; &nbsp; if (currentIndex < progress.length) {&nbsp; &nbsp; &nbsp; next = progress[currentIndex+1];&nbsp; &nbsp; }&nbsp; &nbsp; current.classList.remove('active');&nbsp; &nbsp; current.classList.add('passed');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (!next) {&nbsp; &nbsp; &nbsp;$('.progress-container div').addClass('passed');&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp;}&nbsp; }&nbsp;