带有CSS过渡的滑块中的无限循环

Question

我正在研究移动设备上的一种特殊类型的滑块。 这个想法是只利用css动画来执行动作。 因此，我通过“ 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()