时间戳

首页 > 解决方案 > 带有 Javascript 的水平滚动菜单

javascript - 带有 Javascript 的水平滚动菜单

问题描述

我创建了一个大于页面宽度的菜单。我希望当它到达最后一项时，第一项会再次出现，就像一个没有尽头的圆圈。

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

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

标签： javascripthtmlcssslider

解决方案

我可以建议使用已经存在的库吗？

有一个名为Endless.js的库，这正是您所要求的。演示可以在这里找到。

推荐阅读