0
Ich arbeite an einer bestimmten Art von Slider auf mobilen Geräten. Die Idee besteht darin, nur die CSS-Animationen zu nutzen, um die Bewegungen auszuführen. Also, ich erkenne die Position des Fingers durch das "touchmove" -Ereignis und durch eine bestimmte Funktion ermittele ich die Position. Nun, der Punkt der Sache ist, dass zwischen der ersten Nummer und der letzten, die Animation scheint fehlerhaft zu sein. Die Funktionen prevAll und nextAll funktionieren ordnungsgemäß, jedoch nicht für die erste und die letzte Nummer. Ich weiß nicht, wie man eine Endlosschleife macht, ohne die Richtung zu ändern. Kann mir jemand helfen?Unendliche Schleife in Slider mit CSS-Übergang
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>