本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码，供大家参考，具体内容如下
移动端手势
轮播图分析
1、自动轮播且无缝 [定时器、过渡动画]
2、分页器要随着图片的轮播而改变 [根据索引切换]
3、滑动效果 [touch事件]
4、图片随着分页器变化
5、滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡]
6、滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过渡]]
html页面结构
|
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
|
/* 动态设置过渡 */
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 点要随着图片的轮播而改变 [根据索引切换]
* 3 滑动效果 [touch事件]
* 4 图片随着点而变化
* 5 滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡]
* 6 滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过渡]]
*/
var timer = ''
/* 封装定时器函数 */
var startInterval = function () {
timer = setInterval(function () {
index++;// 基于索引 做位移
addTransition(imgBox); // 为轮播图片组的ul设置过渡函数
setTranslateX(imgBox, -index * width);// 根据当前索引值计算平移的距离
}, 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; // 图片的个数
var pointBox = banner.querySelector("ul:last-child");// 分页器ul
var points = pointBox.querySelectorAll("li");// 分页器集合
var index = 1; // 初始化索引，由于要无缝衔接，索引从1开始
startInterval();
/* transitionend事件：当元素过渡动画结束后执行
每次轮播动画结束后，判断当前索引值
*/
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); // 改变分页器状态
});
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 {
// 不满足滑动条件，回退到之前的状态
addTransition(imgBox);
setTranslateX(imgBox, -index * width);
showPoint(index - 1);
}
}
// **** 最好做一次参数的重置
startX = 0;
distanceX = 0;
isMove = false;
// ****** 为了严谨，再清一次定时器
clearInterval(timer)
// 加上定时器
startInterval();
});
};
|
总结
原生js实现滑动切换的原理主要还是利用移动端的手势事件
- touchstart 当手指触摸屏幕时触发
- touchmove 当手指在屏幕中滑动的时候触发
- touchend 当手指离开屏幕时触发
利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件。
而swiper插件的底层实现原理也是这个，因此，为了快速开发，还是使用swiper插件最好
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_39976512/article/details/83585682