Я сделал специальную карусель (для обучения) на этой веб-странице. Карусель имеет 2 кнопки (следующая и предыдущая) и точки (каждая точка соответствует 1 картинке). Все работает отлично, но есть одна проблема. Я хочу сделать автоматическую карусельную петлю (перебирать изображения с интервалом в X секунд). Сейчас я использую setInterval(nextImgShow, 2000);. Но каждый раз, когда я нажимаю любую кнопку (следующая, предыдущая, точки), интервал меняется.
Пример: у меня интервал 2 с. Если я нажму кнопку, когда прошло 1,5 с, следующее изображение будет отображаться только в течение 0,5 с. Если я нажму сразу на 0,5 с, следующее изображение будет отображаться в течение 1,5 с.
Я уже пытаюсь исправить это с помощью clearInterval();, но это ничего не меняет. Я также пытаюсь использовать clearInterval();, а затем снова установить интервал setInterval(nextImgShow, 2000); (на каждой кнопке), но безуспешно. Я также пытаюсь использовать setTimeout();, но снова ничего.
Мое желание: если интервал равен 2 с, когда я нажимаю любую из кнопок, я хочу сбросить / установить интервал обратно на 2 с. Так что каждое изображение отображается в течение 2 секунд, независимо от того, когда была нажата кнопка.
Может ли кто-нибудь помочь мне решить эту проблему?
Ниже приведен код JavaScript и ссылка на мою веб-страницу, чтобы вы могли видеть.
ССЫЛКА: Ссылка на страницу, чтобы посмотреть демо
// navigation selection
const navigation = document.querySelector("ul.navigation");
const navigationToggleButton = document.querySelector(".navigation-toggle");
const navigationList = document.querySelectorAll(".navigation a");
// background image selector
const backgroundImgDiv = document.querySelector(".bg");
const previousImgBtn = document.querySelector(".prev");
const nextImgBtn = document.querySelector(".next");
const imgDotBtn = Array.from(document.querySelectorAll(".dot"));
const arrImg = ['url("img/0.jpg")', 'url("img/1.jpg")', 'url("img/2.jpg")', 'url("img/3.jpg")'];
const dot0 = document.querySelector(".dot-0");
const dot1 = document.querySelector(".dot-1");
const dot2 = document.querySelector(".dot-2");
const dot3 = document.querySelector(".dot-3");
let startImgIndex = 0;
let currentIndex = 0;
// navigation functions
function toggleNav() {
navigation.classList.toggle("active");
}
function navLink() {
navigation.classList.remove("active");
}
// background image functions
function nextImgShow() {
startImgIndex++;
if (startImgIndex === arrImg.length) {
startImgIndex = 0;
}
currentIndex = startImgIndex;
backgroundImgDiv.style.backgroundImage = arrImg[startImgIndex];
toggleDotActive(currentIndex);
}
function previousImgShow() {
startImgIndex--;
if (startImgIndex === -1) {
startImgIndex = (arrImg.length - 1);
}
currentIndex = startImgIndex;
backgroundImgDiv.style.backgroundImage = arrImg[startImgIndex];
toggleDotActive(currentIndex);
}
function dotBtnNavigate() {
if (this.classList.contains("dot-0")) {
dotBtnSet(0);
} else if (this.classList.contains("dot-1")) {
dotBtnSet(1);
} else if (this.classList.contains("dot-2")) {
dotBtnSet(2);
} else if (this.classList.contains("dot-3")) {
dotBtnSet(3);
}
}
function dotBtnSet (number) {
backgroundImgDiv.style.backgroundImage = arrImg[number];
startImgIndex = number;
currentIndex = number;
toggleDotActive(currentIndex);
}
function toggleDotActive(currentIndex) {
switch(currentIndex) {
case 0:
dot0.classList.add("dot-active");
dot1.classList.remove("dot-active");
dot2.classList.remove("dot-active");
dot3.classList.remove("dot-active");
break;
case 1:
dot0.classList.remove("dot-active");
dot1.classList.add("dot-active");
dot2.classList.remove("dot-active");
dot3.classList.remove("dot-active");
break;
case 2:
dot0.classList.remove("dot-active");
dot1.classList.remove("dot-active");
dot2.classList.add("dot-active");
dot3.classList.remove("dot-active");
break;
case 3:
dot0.classList.remove("dot-active");
dot1.classList.remove("dot-active");
dot2.classList.remove("dot-active");
dot3.classList.add("dot-active");
break;
default:
break;
}
}
// navigation events
navigationToggleButton.addEventListener("click", toggleNav);
navigationList.forEach(item => item.addEventListener("click", navLink));
// background image event
nextImgBtn.addEventListener("click", nextImgShow)
previousImgBtn.addEventListener("click", previousImgShow);
imgDotBtn.forEach(btn => btn.addEventListener("click", dotBtnNavigate));
// for touch devices (carousel navigate)
const gestureZone = document.querySelector('.img-wrap');
let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;
// for touch devices function (carousel navigate)
function handleGesture() {
if (touchendX <= touchstartX) {
nextImgShow();
}
if (touchendX >= touchstartX) {
previousImgShow();
}
}
setInterval(nextImgShow, 2000);
// navigation events
navigationToggleButton.addEventListener("click", toggleNav);
navigationList.forEach(item => item.addEventListener("click", navLink));
// background image event
nextImgBtn.addEventListener("click", nextImgShow);
previousImgBtn.addEventListener("click", previousImgShow);
imgDotBtn.forEach(btn => btn.addEventListener("click", dotBtnNavigate));
// for touch devices events (carousel navigate)
gestureZone.addEventListener('touchstart', function(event) {
touchstartX = event.changedTouches[0].screenX;
touchstartY = event.changedTouches[0].screenY;
}, false);
gestureZone.addEventListener('touchend', function(event) {
touchendX = event.changedTouches[0].screenX;
touchendY = event.changedTouches[0].screenY;
handleGesture();
}, false);
clearInterval();, вы передавали intervalID, перенастроенный из функции setInterval()? - person Andrew Lohr schedule 09.07.2018startImgIndexиcurrentIndex? - person Chayim Friedman schedule 09.07.2018clearIntervel()(важные разделы). - person Chayim Friedman schedule 09.07.2018clearIntervel(), я делал что-то подобное для каждой кнопки:setInterval(nextImgShow, 2000); clearIntervel()- person Jerry schedule 09.07.2018clearIntervel(): ` function nextImgShow() { startImgIndex++; если (startImgIndex === arrImg.length) { startImgIndex = 0; } текущий индекс = startImgIndex; backgroundImgDiv.style.backgroundImage = arrImg[startImgIndex]; toggleDotActive (текущий индекс); очиститьИнтервал(); setInterval(nextImgShow, 2000); } ` - person Jerry schedule 09.07.2018setIntervalтакой переменной:var intvl = setInterval(function(){}, 1000);и очистить ее следующим образом:clearInterval(intvl). - person Unmitigated schedule 10.07.2018