如何使此視差滑塊自動滑動

Question

我有視差滑塊。 我希望它自動滑到結束，然后滑到開始。 我是新手，JavaScript浪費了2個小時。

setInterval(changeSlide, 2000);

function changeSlide() {
    var next, prev, slideCount, currentSlide, slideDirection;
    next = document.getElementById('next-slide');
    prev = document.getElementById('prev-slide');
    slideCount = document.getElementById('slider-dots').childNodes.length;
    currentSlide = 1;
    slideDirection = 1;

    if (slideDirection === 1) {
        next.click();
        currentSlide++;
        if (currentSlide === slideCount) {
            slideDirection = -1;
        }
    }

    if (slideDirection === -1) {
        prev.click();
        currentSlide--;
        if (currentSlide === 1) {
            slideDirection = 1;
        }
    }
}

Answer 1

親密無間，您所需要的只是糾正您的if邏輯，還可以從函數中提取變量初始化。

順便說一句，我想給你一個例子，它可以幫助你改善邏輯或重寫它。

 // INIT VARS BY YOUR LOGIC let currentSlide = 1, slidesLength = 10 // GET YOUR .slider-dots, direction = 'up'; const animateSlide = (slideNumber, direction) => { // HERE YOU COULD CALL YOUR SLIDER API/FUNCTION // WHICH ANIMATES YOUR SLIDER, IT IS NOT NEEDED TO SIMULATE CLICK // eg direction === 'up' ? slider.next() : slider.prev() | slider.goTo(slideNumber) // WHAT EVER IS YOUR SLIDER API // YOU COULD PUT ALSO A LOGIC FOR clearInterval(slideInterval); // IN ORDER TO DISABLE THE AUTOMATIC MODE console.log(slideNumber, direction); } const changeSlide = () => { if (currentSlide === slidesLength) { direction = 'down'; } else if (currentSlide === 1) { direction = 'up'; } switch (direction) { case 'up': currentSlide += 1; break; case 'down': currentSlide -= 1; break; default: currentSlide = 1; console.error('unknown direction'); } animateSlide(currentSlide, direction); } const slideInterval = setInterval(changeSlide, 2000);