代码之家 › 专栏 › 技术社区 › Nikos Tzoun

带javascript的水平滚动菜单

slider css html javascript

Nikos Tzoun · 技术社区 · 6 年前

我已经创建了一个菜单,它大于页面的宽度。我想当它转到它的最后一个项目,第一个将再次出现像一个没有结束的圆圈。

这是菜单的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;
});

当滑块转到最后一个项目时,它将结束,但我希望第一个项目再次出现。