1.移动端滑动轮播图
要点：
1.一定要开起GPU才能不卡顿-一定要加上z1
getUl.style.transform = 'translate3d(' + xTranslateMove + 'px,0,0)';
2.this指向问题，bind不会自执行的1
events.end.bind(this)();
3.查看是否存在某个事件1
'ontouchstart' in window
4.获取touch事件
touches是当前屏幕上所有触摸点的列表;
targetTouches是当前对象上所有触摸点的列表;
changedTouches是涉及当前事件的触摸点的列表。–滑动只能用这个获取，这个也可以获取第2，3手指列表
参考：https://segmentfault.com/q/1010000002870710
5.addEventListener自动绑定this，不会丢失
6.善用索引1
arrLi[i].index = i;
参考：https://segmentfault.com/q/1010000000626710
完整代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80var arrLi = document.querySelectorAll('.rob-red-li');
var getUl = document.querySelector('.rob-red-ul');
var arrLen = arrLi.length;
var liWidth = arrLi[0].offsetWidth;
var xTranslateMove = 0;
var xTranslateEnd = 0;
var xDown, xMove, direction;
var events = {
eventClass: function (event) {
if ('ontouchstart' in window) {
return {
touchstart: 'touchstart',
touchmove: 'touchmove',
touchend: 'touchend',
}
} else {
return {
touchstart: 'mousedown',
touchmove: 'mousemove',
touchend: 'mouseup',
}
}
},
eventHandle: function () {
switch (event.type) {
case ("touchstart" || "mousedown"):
events.start.bind(this)();
break;
case ("touchmove" || "mousemove"):
events.move.bind(this)();
break;
case ("touchend" || "mouseup"):
events.end.bind(this)();
break;
}
},
start: function () {
event.preventDefault();
xDown = event.touches[0].clientX;
},
move: function () {
event.preventDefault();
xMove = event.touches[0].clientX;
direction = xMove - xDown;
xTranslateMove = xTranslateEnd + direction;
getUl.style.transform = 'translate3d(' + xTranslateMove + 'px,0,0)';
getUl.style.webkitTransform = 'translate3d(' + xTranslateMove + 'px,0,0)';
getUl.style.webkitTransitionDuration = "0ms";
},
end: function () {
event.preventDefault();
xMove = event.changedTouches[0].clientX;
direction = xMove - xDown;
if (direction < 0 && this.index < arrLen - 1) {
xTranslateEnd -= liWidth;
events.translate();
}
if (this.index == arrLen - 1) {
events.translate();
}
if (direction > 0 && this.index > 0) {
xTranslateEnd += liWidth;
events.translate();
}
if (this.index == 0) {
events.translate();
}
},
translate:function () {
getUl.style.transform = 'translate(' + xTranslateEnd + 'px,0)' + "translateZ(0)";
getUl.style.webkitTransform = 'translate(' + xTranslateEnd + 'px,0)' + "translateZ(0)";
getUl.style.webkitTransitionDuration = "200ms";
}
}
for (var i = arrLen - 1; i >= 0; i--) {
arrLi[i].index = i;
arrLi[i].addEventListener(events.eventClass(event).touchstart, events.eventHandle, false);
arrLi[i].addEventListener(events.eventClass(event).touchmove, events.eventHandle, false);
arrLi[i].addEventListener(events.eventClass(event).touchend, events.eventHandle, false);
}
正常写法：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38for (var i = arrLen - 1; i >= 0; i--) {
arrLi[i].index = i;
arrLi[i].addEventListener(events.eventClass(event).touchstart, function (event) {
event.preventDefault();
xDown = event.touches[0].clientX;
this.addEventListener(events.eventClass(event).touchmove, function (event) {
event.preventDefault();
xMove = event.touches[0].clientX;
direction = xMove - xDown;
xTranslateMove = xTranslateEnd + direction;
getUl.style.transform = 'translate3d(' + xTranslateMove + 'px,0,0)';
getUl.style.webkitTransitionDuration = "0ms";
});
})
arrLi[i].addEventListener(events.eventClass(event).touchend, function () {
event.preventDefault();
xMove = event.changedTouches[0].clientX;
direction = xMove - xDown;
if (direction < 0 && this.index < arrLen - 1) {
xTranslateEnd -= liWidth;
getUl.style.webkitTransform = 'translate(' + xTranslateEnd + 'px,0)' + "translateZ(0)";
getUl.style.webkitTransitionDuration = "200ms";
}
if (this.index == arrLen - 1) {
getUl.style.webkitTransform = 'translate(' + xTranslateEnd + 'px,0)' + "translateZ(0)";
getUl.style.webkitTransitionDuration = "200ms";
}
if (direction > 0 && this.index > 0) {
xTranslateEnd += liWidth;
getUl.style.webkitTransform = 'translate(' + xTranslateEnd + 'px,0)' + "translateZ(0)";
getUl.style.webkitTransitionDuration = "200ms";
}
if (this.index == 0) {
getUl.style.webkitTransform = 'translate(' + xTranslateEnd + 'px,0)' + "translateZ(0)";
getUl.style.webkitTransitionDuration = "200ms";
}
})
}