在进度条上停止循环

Question

我正在使用这个进度条： https ://codepen.io/thegamehasnoname/pen/JewZrm我遇到的问题是它循环，我想要实现的是：停止在最后一张进度幻灯片上（停止循环）。如果用户在进度条停止后位于最后一张幻灯片上，并且我单击按钮，则它应该从上一张幻灯片开始，而不是进度条的第一张幻灯片。.button-prev这是代码：// swiper custom progressbarconst 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) {

    const currentIndex = progress.indexOf(current);

    if (currentIndex < progress.length) {

      next = progress[currentIndex+1];

    }

    current.classList.remove('active');

    current.classList.add('passed');

    

    if (!next) {

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

      return;

   }

  }