移动端轮播图

​ 封装一个移动端的轮播图,移动端的轮播图呢!和pc端还不一样,事件不一样,触发的条件也不一样,所以今天来封装一个基本的轮播图.

​ 想必大家也都知道,移动端嘛,屏幕都是不一样大的,屏幕的大小取决于制造商,所以,这样咱们使用流动式布局,可以吧!!

​

第一步,HTML基本样式

​ 首先,咱先先出基本的轮播图样式,img 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
    <ul>
        <li>
            <img src="images/l1.jpg">
        </li>
        <li>
            <img src="images/l2.jpg">
        </li>
        <li>
            <img src="images/l3.jpg">
        </li>
        <li>
            <img src="images/l4.jpg">
        </li>
    </ul>
</div>

这个样式没有问题把,一个大盒子包裹着需要运动的ul, container作为运动视口, ul 作为运动的盒子,这要是还有问题的话,不妨回去学学HTML.. 好了,接下来写css.

第二部,参数三样式

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
 body {
            margin: 0;
       }
        
 .container {
            width: 100%;
            /* 当子元素不缩放的时候,将会占4个屏幕的宽度,所以需要溢出影藏 */
            overflow: hidden;
        }
        
 .container ul {
            list-style: none;
            margin: 0;
            padding: 0;
            /* 子元素需要运用flex,故将父元素设为flex布局 */
            display: flex;
        }
        
.container ul li {
		/*因为父盒子设为flex布局,所有的图片都会在一排缩放进行显示,所以将它们设置为不缩放*/
            flex-shrink: 0;
            width: 100%;
        }
        
.container img {
            vertical-align: top;
            width: 100%;
        }

​ 样式已经写出来了,咱们接下来写js , js里面运用到了一个函数,就是左滑,右划的函数,这里不做太多解释 , 我的博客里面有这个函数的封装 , 不明白的话就去看看(webldx.github.io <– 我的博客) , 好了上代码!

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
这里进行思路分析,对照着代码分析 : 
	1. 首先获取到大盒子,在获取到其子元素,也就是视口
	2.这里介绍一个方法,可以获取到元素宽度的一个方法document.documentElement.clientWidth;
	3. 设置一个变量,相当于轮播图的索引,
    4. 滑动的距离设置为全局变量
    首先必须触发滑动事件 , 这里就得计算出当前的位置,因为要使用该参数来进行判断,当图片可以拖动了,但是问题出现了,当我下一次点击了时候,又回到了起始位置,所以咱们得使用之前位置加上当前滑动的距离,才可以避免这个问题,接下来使用左滑与右划事件,这里不做太多介绍,因为没有什么技术难度... 当左滑与右划实现之后,新的问题出现了,也就是动画队列,当我快速的滑动的时候,图片不会流畅的被拖动,所以需要清除动画,故为 scrollContainer.style.transition = 'none';



<script type="text/javascript">
       //轮播图的当前位置 -index * 一张图片的宽度
  
        var container = document.querySelector('.container');
        var scrollContainer = container.children[0];
        // 屏幕的宽度
        var sw = document.documentElement.clientWidth;
        // 轮播图的索引
        var index = 0;
        // 滑动距离
        var distance = 0;

        swipe(container, {
            swipeLeft: function() {
                // 如果当前的滑动距离超过了屏幕宽度的一半 让他滑动到下一张
                if (Math.abs(distance) > sw / 2) {
                    if (index < 3) {
                        index++;
                    }
                }

                // 为滑动添加过渡动画
                scrollContainer.style.transition = 'transform .6s';

                // 让ul滚动
                scrollContainer.style.transform = 'translateX(' + -index * sw + 'px)';
            },
            swipeRight: function() {
                // 如果当前的滑动距离超过了屏幕宽度的一半 让他滑动到下一张
                if (Math.abs(distance) > sw / 2) {
                    if (index > 0) {
                        index--;
                    }
                }

                // 为滑动添加过渡动画
                scrollContainer.style.transition = 'transform .6s';

                // 让ul滚动
                scrollContainer.style.transform = 'translateX(' + -index * sw + 'px)';
            },
            drag: function(e) {
                // 滑动距离 e.touches[0].pageX实际上就是moveX
                distance = e.touches[0].pageX - e.info.startX;
                // 轮播图的当前位置加上滚动距离
                var current = -index * sw + distance;
                // 在手指拖动轮播图的时候禁止过渡动画
                scrollContainer.style.transition = 'none';

                scrollContainer.style.transform = 'translateX(' + current + 'px)';
            }
        });










	// 下面为封装好的手势函数

        function swipe(el, options) {

            var startX = 0;
            var startY = 0;
            var moveX = 0;
            var moveY = 0;
            var disX = 0;
            var disY = 0;

            // 没有发生touchmove事件
            var isMove = false;

            // 默认值
            var defaults = {
                swipeLeft: function() {},
                swipeRight: function() {},
                swipeDown: function() {},
                swipeUp: function() {},
                drag: function() {}
            }

            // 如果用户传参了 就用用户传的 如果没传 就用默认值
            // for (var attr in options) {
            // 	defaults[attr] = options[attr];
            // }

            // 对象覆盖 用第二个参数对象覆盖第一个参数对象 且覆盖结果会影响到原对象
            Object.assign(defaults, options);

            // 记录开始滑动的坐标
            el.addEventListener('touchstart', function(e) {
                startX = e.touches[0].pageX;
                startY = e.touches[0].pageY;
                disX = startX - el.offsetLeft;
                disY = startY - el.offsetTop;
            });

            // 记录滑动过程中的坐标
            el.addEventListener('touchmove', function(e) {
                moveX = e.touches[0].pageX;
                moveY = e.touches[0].pageY;
                isMove = true;

                // 将touchstart事件发生时侯的x和y保存到当前的事件对象中
                e.info = {
                    startX: startX,
                    startY: startY,
                    disX: disX,
                    disY: disY
                }

                // 将在touchmove事件发生的时候要做的事情写在函数外面 => drag
                defaults.drag.call(el, e);

            });

            // 判断垂直滑动还是水平滑动 ...
            el.addEventListener('touchend', function(e) {
                // 如果发生了滑动事件
                if (isMove) {
                    // 水平边长
                    var absX = Math.abs(moveX - startX);
                    // 垂直边长
                    var absY = Math.abs(moveY - startY);

                    if (absX > absY) {
                        // 水平
                        // console.log('水平');

                        if (moveX - startX > 0) {
                            // console.log('向右滑动');
                            defaults.swipeRight.call(el, e);

                        } else {
                            //console.log('向左滑动');
                            defaults.swipeLeft.call(el, e);
                        }

                    } else {
                        // 垂直
                        // console.log('垂直');

                        if (moveY - startY > 0) {
                            // console.log('向下滑动');
                            defaults.swipeDown.call(el, e);

                        } else {
                            // console.log('向上滑动');
                            defaults.swipeUp.call(el, e);
                        }
                    }

                }
                // 初始isMove变量方便 下回触发事件的时候做判断
                isMove = false;

            });
        }
    </script>

本文标题:移动端轮播图

文章作者:李大玄

发布时间:2018-08-08, 10:59:24

最后更新:2018-08-08, 11:52:55

原始链接:http://yoursite.com/2018/08/08/移动端轮播图/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 第一步,HTML基本样式
  • 第二部,参数三样式
    • |