本文實例為大家分享了js實現(xiàn)移動端輪播圖滑動切換的具體代碼，供大家參考，具體內(nèi)容如下
移動端手勢
輪播圖分析
1、自動輪播且無縫 [定時器、過渡動畫]
2、分頁器要隨著圖片的輪播而改變 [根據(jù)索引切換]
3、滑動效果 [touch事件]
4、圖片隨著分頁器變化
5、滑動結(jié)束的時候，如果滑動的距離不超過屏幕的1/3，就恢復回去 [過渡]
6、滑動結(jié)束的時候，如果滑動的距離超過屏幕的1/3，就切換 [滑動方向 + 過渡]]
html頁面結(jié)構(gòu)
|
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
|
<!--輪播圖--> <div class="jd_banner"> <ul class="clearfix"> <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l2.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l3.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l4.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l5.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l6.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l7.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li> </ul> <ul class="clearfix"> <li class="now"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div> |
js部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/* 動態(tài)設置過渡 */var addTransition = function (ele) { ele.style.transition = "all .6s"; ele.style.webkitTransition = "all .6s";};/* 移除過渡效果 */var removeTransition = function (ele) { ele.style.transition = "none"; ele.style.webkitTransition = "none";};/* 設置容器平移 -- 也就是滑動動畫 ele:當前元素 xwidth:平移的距離*/var setTranslateX = function (ele, xwidth) { ele.style.transform = "translateX(" + xwidth + "px)"; ele.style.webkitTransform = "translateX(" + xwidth + "px)";} |
|
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
var banner = function () { /** 輪播圖分析 */ /** 1 自動輪播且無縫 [定時器、過渡動畫] * 2 點要隨著圖片的輪播而改變 [根據(jù)索引切換] * 3 滑動效果 [touch事件] * 4 圖片隨著點而變化 * 5 滑動結(jié)束的時候，如果滑動的距離不超過屏幕的1/3，就恢復回去 [過渡] * 6 滑動結(jié)束的時候，如果滑動的距離超過屏幕的1/3，就切換 [滑動方向 + 過渡]] */ var timer = '' /* 封裝定時器函數(shù) */ var startInterval = function () { timer = setInterval(function () { index++;// 基于索引 做位移 addTransition(imgBox); // 為輪播圖片組的ul設置過渡函數(shù) setTranslateX(imgBox, -index * width);// 根據(jù)當前索引值計算平移的距離 }, 2000); } var banner = document.querySelector(".jd_banner"); var width = banner.offsetWidth; // 屏幕的寬度 var imgBox = banner.querySelector("ul:first-child"); // 輪播圖片ul var length = imgBox.querySelectorAll("li").length; // 圖片的個數(shù) var pointBox = banner.querySelector("ul:last-child");// 分頁器ul var points = pointBox.querySelectorAll("li");// 分頁器集合 var index = 1; // 初始化索引，由于要無縫銜接，索引從1開始 startInterval(); /* transitionend事件：當元素過渡動畫結(jié)束后執(zhí)行 每次輪播動畫結(jié)束后，判斷當前索引值 */ imgBox.addEventListener("transitionend", function () { if (index >= length - 1) { index = 1; // 清過渡，瞬間定位imgBox removeTransition(imgBox); setTranslateX(imgBox, -index * width); } // 滑動的時候也需要無縫 else if (index <= 0) { index = 8; removeTransition(imgBox); setTranslateX(imgBox, -index * width); } showPoint(index - 1); // 改變分頁器狀態(tài) }); var showPoint = function (index) { for (var i = 0; i < points.length; i++) { points[i].className = ''; } points[index].className = "now"; }; /* 滑動切換 (touch事件) */ var startX = 0; // 觸摸起始點 imgBox.addEventListener("touchstart", function (e) { // 記錄起始位置的X坐標 clearInterval(timer); startX = e.touches[0].clientX; }); var distanceX = 0; var translateX = 0; // **** 加一個標識，判斷用戶有沒有滑動 var isMove = false imgBox.addEventListener("touchmove", function (e) { var moveX = e.touches[0].clientX; // 計算位移,有正負方向 distanceX = moveX - startX; // 計算目標元素的位移 // 元素將要的定位 = 當前定位 + 手指移動的距離 translateX = -index * width + distanceX; // ********** 要想圖片實時地跟著手指走，一定要把過渡清楚掉 removeTransition(imgBox) setTranslateX(imgBox, translateX); isMove = true;// 確定用戶有滑動 e.preventDefault(); // 去除移動端瀏覽器默認的滑動事件 }); imgBox.addEventListener("touchend", function (e) { if (isMove) { if (Math.abs(distanceX) > width / 3) { // 切換 if (distanceX > 0) { // 上一張 index = index - 1; } else { // 下一張 index = index + 1; } addTransition(imgBox); // 設置過渡動畫 setTranslateX(imgBox, -index * width); if (index >= 9) { index = 1; } if (index <= 0) { index = 8; } showPoint(index - 1); } else { // 不滿足滑動條件，回退到之前的狀態(tài) addTransition(imgBox); setTranslateX(imgBox, -index * width); showPoint(index - 1); } } // **** 最好做一次參數(shù)的重置 startX = 0; distanceX = 0; isMove = false; // ****** 為了嚴謹，再清一次定時器 clearInterval(timer) // 加上定時器 startInterval(); });}; |
總結(jié)
原生js實現(xiàn)滑動切換的原理主要還是利用移動端的手勢事件
- touchstart 當手指觸摸屏幕時觸發(fā)
- touchmove 當手指在屏幕中滑動的時候觸發(fā)
- touchend 當手指離開屏幕時觸發(fā)
利用touch相關事件實現(xiàn)移動端常見滑動效果和移動端常見的手勢事件。
而swiper插件的底層實現(xiàn)原理也是這個，因此，為了快速開發(fā)，還是使用swiper插件最好
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_39976512/article/details/83585682
