javascript - 我怎样才能让这个视差滑块自动滑动

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;
        }
    }
}

标签： javascript

Answer 1

你很接近，你需要做的就是纠正你的 if else 逻辑，也从函数中提取你的变量初始化。

顺便说一句，我想给你一个例子，它可以帮助你改进你的逻辑或重写它。

// 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
  // e.g 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);