0
私はモバイルデバイス上の特定の種類のスライダを扱っています。 アイデアは、cssアニメーションを利用して動きを実行することです。 したがって、私は "タッチ移動"イベントを通じて指の位置を検出し、特定の機能を通じて位置を決定します。 問題のポイントは、最初の数値と最後の数値の間にアニメーションが誤動作しているように見えることです。 prevAll関数とnextAll関数は正しく機能しますが、最初と最後の番号では機能しません。 方向を変えずに無限ループを作る方法がわかりません。 誰かが私を助けることができますか？CSSの遷移を伴うスライダの無限ループ
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>