慕田峪4524236
2023-09-28 17:08:31
我正在使用這個(gè)進(jìn)度條: https ://codepen.io/thegamehasnoname/pen/JewZrm我遇到的問(wèn)題是它循環(huán),我想要實(shí)現(xiàn)的是:停止在最后一張進(jìn)度幻燈片上(停止循環(huán))。如果用戶在進(jìn)度條停止后位于最后一張幻燈片上,并且我單擊按鈕,則它應(yīng)該從上一張幻燈片開(kāi)始,而不是進(jìn)度條的第一張幻燈片。.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();我嘗試添加這個(gè):if (current) { if (!next) { $('.progress-container div').addClass('passed'); }}但是該類(lèi)passed被刪除并且進(jìn)度條再次開(kāi)始。這是我的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');});關(guān)于如何實(shí)現(xiàn)這一目標(biāo)有什么想法嗎?
1 回答

慕運(yùn)維8079593
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊
你幾乎已經(jīng)解決了!只需添加一個(gè) return 語(yǔ)句即可避免將活動(dòng)調(diào)用設(shè)置為第一個(gè)進(jìn)度元素。
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;
}
}
添加回答
舉報(bào)
0/150
提交
取消