Question

我创建了一个菜单，该菜单大于页面的宽度。而且我要说到最后一个项目时，第一个项目会再次像一个没有尽头的圆圈出现。

这是菜单的CSS代码

`.slider
  width: 200%
  height: 65vh
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  display: flex
  align-items: center

  user-select: none

  transition: all 0s

  &:hover
    cursor: grab`

这是js

    var isDown = false;
var startX;
var mousePosition;
var offset = [0,0];

$('.slider').mousedown(function(e) {
  $(this).css('cursor', 'grabbing');
  $('.pointer').css({'width': '55px', 'height': '55px'});
  isDown = true;
  startX = e.clientX;
  offset = [
        this.offsetLeft - e.clientX,
        this.offsetTop - e.clientY
    ];
  // var startX = e.pageX;
  // var math = Math.round(Math.sqrt(Math.pow(startX - event.clientX, 2))) + 'px';
  // $(this).css('transform', 'translate(' + math + 'px, -50%)');
  // console.log(math);
});

$('.slider').mousemove(function(e) {
  // e.preventDefault();
  if (isDown){
    // var tap = $('.slider').offset().left;
    // console.log(e.pageX - tap);

    mousePosition = e.clientX ;
    console.log(mousePosition);
    // $(this).css('transform', 'translate(' + mousePosition + ', -50%)');
    // console.log(e);
    this.style.left = (mousePosition + offset[0]) + 'px';
    startX = mousePosition;
    // this.style.transform = "translate3d(" + 0 + "1110px, " + 0 + "0px, 0)";
    // div.style.left = (mousePosition.x + offset[0]) + 'px';
  }

});

$('.slider').mouseup(function() {
  $(this).css('cursor', 'grab');
  $('.pointer').css({'width': '30px', 'height': '30px'});
  isDown = false;
});

当滑块移到最后一个项目时，它结束了，但是我希望第一个再次出现。

Answer 1

我可以建议使用现有的库吗？

有一个名为Endless.js的库，它确实满足您的要求。可以在here上找到该演示。

使用Javascript的水平滚动菜单

1 个答案: