垂直Javascript滑块，比应有的滑动更多

时间：2019-01-22 19:40:59

标签： javascript math calculation

我正在尝试制作一个垂直图像滑块，该滑块恰好可以滑动滑块的宽度。

我现在已经尝试了许多个小时才能使其正常工作，我认为这应该很简单，但是我根本无法弄清楚自己做错了什么，而我的大脑将在此期间融化还以为我在这一点上太复杂了。

滑块的宽度为548px，高度为137px。

滑块内部的图像的宽度为548px除以2。

Fiddle of the slider

如您在下面看到的，滑块移动的幅度略大于应有的幅度 enter image description here

JavaScript模块（是的，向左移动和向右移动是不同的，这是因为我一直在测试很多不同的方法。

如果我将正确的功能更改为此：

  var horizontalMoveRight = function(wrapper) {
    wrapper.scrollLeft += elemScroll;

    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      elemMoved++;
    }
  };

几乎可以运行，但单击几下后仍会稍微移动一点。

var horizontalSlider = (function() {

  var slideParent;
  var slideLeftButton;
  var slideRightButton;
  var slideInterval;
  var slideTimer;

  var elemScroll = 0;
  var elemLength = 0;
  var elemMove = 0;
  var elemMoved = 0;
  var lastMove = false;


  var horizontalConstruct = function(parenElement, lButn, rButn, slidTimer, eleScroll) {
    slideParent = parenElement;
    slideLeftButton = document.querySelectorAll(lButn);
    slideRightButton = document.querySelectorAll(rButn);
    slideTimer = slidTimer;
    elemScroll = eleScroll;

    Array.from(slideLeftButton).forEach(elem => elem.addEventListener("click", horizontalClickLeft, false));
    Array.from(slideRightButton).forEach(elem => elem.addEventListener("click", horizontalClickRight, false));
  };

  var horizontalClickLeft = function() {
    clearInterval(slideInterval);
    elemMoved = 0;
    var wrapper = this.parentNode.querySelector(slideParent);

    elemLength = wrapper.clientWidth;
    elemMove = (elemLength - elemScroll) / elemScroll;

    slideInterval = setInterval(function() {
      horizontalMoveLeft(wrapper);
    }, slideTimer);
  };
  var horizontalClickRight = function() {
    clearInterval(slideInterval);
    elemMoved = 0;
    var wrapper = this.parentNode.querySelector(slideParent);

    elemLength = wrapper.clientWidth;
    elemMove = (elemLength - elemScroll) / elemScroll;

    slideInterval = setInterval(function() {
      horizontalMoveRight(wrapper);
    }, slideTimer);
  };

  var horizontalMoveRight = function(wrapper) {
    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      if (elemMoved + 1 > elemMove) {
        lastMove = Number(((elemMove - elemMoved) * 10));
      }

      if (lastMove === false) {
        wrapper.scrollLeft += elemScroll;
      } else {
        wrapper.scrollLeft += lastMove;
        lastMove = false;
      }

      elemMoved++;
    }
  };

  var horizontalMoveLeft = function(wrapper) {
    wrapper.scrollLeft += -elemScroll;

    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      elemMoved++;
    }
  };


  return {
    horizontalConstruct: horizontalConstruct,
    horizontalClickLeft: horizontalClickLeft,
    horizontalClickRight: horizontalClickRight

  };
})();

horizontalSlider.horizontalConstruct(".slideInner", ".slideLeftHorizontal", ".slideRightHorizontal", 7, 10);
.slideInner {
  position: relative;
  width: 548px;
  height: 137px;
  overflow: hidden;
  display: flex;
}

.slideInner a,
.slideInner a img {
  width: calc(548px / 2);
}

.slideRightHorizontal,
.slideLeftHorizontal {
  position: absolute;
  min-width: 45px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
}

.slideLeftHorizontal {
  left: 0;
  color: #fff;
}

.slideRightHorizontal {
  right: 0;
  color: #fff;
}

.overflowh {
  overflow: hidden;
}

.slideT1M {
  margin: 20px 0px;
  border: 1px solid #000;
  display: flex;
  width: 548px;
  position: relative;
}
<div class="slideT1M">
  <div class="slideLeftHorizontal">
    L
  </div>
  <div class="slideInner">
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
  </div>
  <div class="slideRightHorizontal">
    R
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

您的错误在此行上：

elemMove = (elemLength - elemScroll) / elemScroll;

只需将其更改为：

elemMove = elemLength / elemScroll; 

var horizontalSlider = (function() {

  var slideParent;
  var slideLeftButton;
  var slideRightButton;
  var slideInterval;
  var slideTimer;

  var elemScroll = 0;
  var elemLength = 0;
  var elemMove = 0;
  var elemMoved = 0;
  var lastMove = false;


  var horizontalConstruct = function(parenElement, lButn, rButn, slidTimer, eleScroll) {
    slideParent = parenElement;
    slideLeftButton = document.querySelectorAll(lButn);
    slideRightButton = document.querySelectorAll(rButn);
    slideTimer = slidTimer;
    elemScroll = eleScroll;

    Array.from(slideLeftButton).forEach(elem => elem.addEventListener("click", horizontalClickLeft, false));
    Array.from(slideRightButton).forEach(elem => elem.addEventListener("click", horizontalClickRight, false));
  };

  var horizontalClickLeft = function() {
    clearInterval(slideInterval);
    elemMoved = 0;
    var wrapper = this.parentNode.querySelector(slideParent);

    elemLength = wrapper.clientWidth;
    elemMove = (elemLength - elemScroll) / elemScroll;

    slideInterval = setInterval(function() {
      horizontalMoveLeft(wrapper);
    }, slideTimer);
  };
  var horizontalClickRight = function() {
    clearInterval(slideInterval);
    elemMoved = 0;
    var wrapper = this.parentNode.querySelector(slideParent);

    elemLength = wrapper.clientWidth;
    elemMove = elemLength / elemScroll;

    slideInterval = setInterval(function() {
      horizontalMoveRight(wrapper);
    }, slideTimer);
  };

  var horizontalMoveRight = function(wrapper) {
    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      if (elemMoved + 1 > elemMove) {
        lastMove = Number(((elemMove - elemMoved) * 10));
      }

      if (lastMove === false) {
        wrapper.scrollLeft += elemScroll;
      } else {
        wrapper.scrollLeft += lastMove;
        lastMove = false;
      }

      elemMoved++;
    }
  };

  var horizontalMoveLeft = function(wrapper) {
    wrapper.scrollLeft += -elemScroll;

    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      elemMoved++;
    }
  };


  return {
    horizontalConstruct: horizontalConstruct,
    horizontalClickLeft: horizontalClickLeft,
    horizontalClickRight: horizontalClickRight

  };
})();

horizontalSlider.horizontalConstruct(".slideInner", ".slideLeftHorizontal", ".slideRightHorizontal", 7, 10);
.slideInner {
  position: relative;
  width: 548px;
  height: 137px;
  overflow: hidden;
  display: flex;
}

.slideInner a,
.slideInner a img {
  width: calc(548px / 2);
}

.slideRightHorizontal,
.slideLeftHorizontal {
  position: absolute;
  min-width: 45px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
}

.slideLeftHorizontal {
  left: 0;
  color: #fff;
}

.slideRightHorizontal {
  right: 0;
  color: #fff;
}

.overflowh {
  overflow: hidden;
}

.slideT1M {
  margin: 20px 0px;
  border: 1px solid #000;
  display: flex;
  width: 548px;
  position: relative;
}
<div class="slideT1M">
  <div class="slideLeftHorizontal">
    L
  </div>
  <div class="slideInner">
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
    <a href="#">
      <img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
    </a>
  </div>
  <div class="slideRightHorizontal">
    R
  </div>
</div>

相关问题
最新问题