javascript - 带有CSS转换的 slider 中的无限循环

Question

我正在研究移动设备上的一种特殊类型的 slider 。 这个想法是只利用 css 动画来执行 Action 。 因此，我通过“touchmove”事件检测手指的位置，并通过特定功能确定位置。 现在，问题的关键是在第一个和最后一个数字之间，动画似乎出现故障。 prevAll 和 nextAll 函数正常工作，但不适用于第一个和最后一个数字。 我不知道如何在不改变方向的情况下进行无限循环。 有人可以帮助我吗？

var
  isMobile = function() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
      return true;
    else
      return false;
  },
  _child = $('ul'),
  human = false,
  saved = 1,
  _check = function(int) {
    _child.find('li').removeClass('selected before after');
    _child.find('li[value=' + int + ']').addClass('selected');
    _child.find('li.selected').nextAll('li').addClass('after');
    _child.find('li.selected').prevAll('li').addClass('before');
  },
  _m = function(n) {
    if (n > 10) {
      return _m(n - 10);
    } else if (n < 1) {
      return _m(n + 10);
    } else
      return n;
  };

_child.on('mousedown touchstart', function(e) {
  init = isMobile() ? e.originalEvent.touches[0].pageY : e.pageY;
  human = true;
});
$(document).on('mousemove touchmove', function(e) {
  e.preventDefault();
  if (human) {
    var
      _current = isMobile() ? e.originalEvent.touches[0].pageY : e.pageY;

    _current = init - _current;
    _current = Math.round(_current * .03);
    _current = saved + _current;

    var
      int = _m(_current);

    _check(int);

    $(this).on('mouseup touchend', function() {
      saved = _current;
      human = false;
    });
  }
});

_child.find('li[value=' + saved + ']').addClass('selected');
_check(saved);

body {
  margin: 0;
  background: #FCFCFC;
  color: #222;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px;
  height: 200px;
  background: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  text-align: center;
  font-size: 72px;
  opacity: .5;
  transition: all .4s ease
}
li.after {
  transform: translateY(100%);
}
li.before {
  transform: translateY(-100%);
}
li.selected {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li value="1" class="selected">1</li>
  <li value="2">2</li>
  <li value="3">3</li>
  <li value="4">4</li>
  <li value="5">5</li>
  <li value="6">6</li>
  <li value="7">7</li>
  <li value="8">8</li>
  <li value="9">9</li>
  <li value="10">10</li>
</ul>

Answer 1

试图创建工作示例，但我没有足够的时间。 当你到达最后一个 li 时，只需从顶部取一个，将其附加到列表的末尾，然后删除第一个。像这样:

var cloneLi = $(_child.find('li')[0]).clone()
_child.append(cloneLi);
$(_child.find('li')[0]).remove()