-
Notifications
You must be signed in to change notification settings - Fork 33
/
mBanner.html
314 lines (307 loc) · 13 KB
/
mBanner.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
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="张小月,Redspite,web前端,web前端简历,个人博客">
<meta name="description" content="WEB前端工程师——RedSpite的自学之路，个人博客知识笔记与心得记录">
<meta name="author" content="张小月,Redspite">
<title>RedSpite » 移动端自适应banner轮播 手写</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/syntaxy.light.min.css">
<link rel="stylesheet" href="css/base.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- xiaoyuezhang.com Baidu tongji analytics -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?f87e415f9d1f6111b1d34c5f96927d9b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="content">
<div class=" container">
<div id="top">
<img src="image/top.png" alt="回到顶部">
</div>
<div class="header-box">
<img src="image/header.jpg" alt="我的头像">
</div>
<div class="center">
<p class="myid">RedSpite</p>
</div>
<div class="my-sort center">
<a href="index.html">简历</a>
<a href="drip.html">点滴</a>
<a href="message.html">留言</a>
</div>
<div id="artical-detail">
<h4>移动端自适应banner轮播 手写</h4>
<p>随着移动设备普及率越来越高，我们前端工程师现在必须掌握h5页面的书写了。
手机端展示方式不需要太复杂，毕竟屏幕只有这么大嘛不是，所以能搞得花样也不多，运用最多的就是轮播了吧！</p>
<p>我喜欢手写常用的前端功能，所以这次也试着自己摸索写一下吧~~</p>
<p>首先是需要了解的几位重要人物:</p>
<p><strong>* touches</strong></p>
<p>触摸点是有多个的，每个Touch对象包含的属性如下。</p>
<p>clientX：触摸目标在视口中的x坐标。</p>
<p>clientY：触摸目标在视口中的y坐标。</p>
<p>identifier：标识触摸的唯一ID。</p>
<p>pageX：触摸目标在页面中的x坐标。</p>
<p>pageY：触摸目标在页面中的y坐标。</p>
<p>screenX：触摸目标在屏幕中的x坐标。</p>
<p>screenY：触摸目标在屏幕中的y坐标。</p>
<p>target：触目的DOM节点目标。</p>
<p><strong>* touchstart</strong></p>
<p>touchstart 是手指触摸到屏幕一瞬间触发的事件，可以在这里记录手指在屏幕上的初始位置</p>
<div class="code">
<pre class="codebox" data-type="blank">
var startX, startY, endX, endY;
$("#bannerm").on("touchstart",function(e){
//开始位置
startX = e.originalEvent.targetTouches[0].clientX;
});
</pre>
</div>
<p><strong>* touchmove</strong></p>
<p>touchmove 是手指在页面进行拖拽时触发的事件，可以在这里记录手指在屏幕的最后位置。
在这个事件发生期间，调用preventDefault()事件可以阻止滚动。</p>
<div class="code">
<pre class="codebox" data-type="blank">
$("#mbanner").on("touchmove", function (e) {
e.preventDefault();
//结束位置
endX = e.originalEvent.targetTouches[0].clientX;
});
</pre>
</div>
<p><strong>* touchend</strong></p>
<p>touchend 是手指离开屏幕触发的事件，在这个事件发生期间，调用preventDefault()事件可以阻止滚动。</p>
<div class="code">
<pre class="codebox" data-type="blank">
$("#mbanner").on("touchend", function (e) {
e.preventDefault();
if ((startX - endX) > 100) {
//判断滑动方向，初始 > 结束 向右
}
else if ((startX - endX) < -100){
//初始 < 结束 向左
}
});
</pre>
</div>
<p><strong>现在来写一写轮播</strong> (移动端查看) </p>
<div id="bannerm">
<ul>
<li class="active">
<img src="image/ban1.jpg" alt="banner1">
</li>
<li>
<img src="image/ban2.jpg" alt="banner2">
</li>
<li>
<img src="image/ban3.jpg" alt="banner3">
</li>
<li>
<img src="image/ban1.jpg" alt="banner1">
</li>
</ul>
</div>
<strong class="center" id="numberI">1</strong>
<h5>Html:</h5>
<div class="code">
<pre class="codebox">
<ul id="mbanner">
<li>
<img src="image/ban1.jpg" alt="banner1">
</li>
<li>
<img src="image/ban2.jpg" alt="banner2">
</li>
<li>
<img src="image/ban3.jpg" alt="banner3">
</li>
</ul>
</pre>
</div>
<h5>Css:</h5>
<div class="code">
<pre class="codebox">
#mbanner{
width: 100%;
margin: 0 auto;
position: relative;
min-height: 100px;
overflow: hidden;
}
#mbanner ul{
width: 400%;
height: 100%;
}
#mbanner li{
position: relative;
width: 25%;
height: 0;
padding-bottom: 7.5%;
overflow: hidden;
float: left;
}
#mbanner li img{
width: 100%;
}
</pre>
</div>
<h5>Js:</h5>
<div class="code">
<pre class="codebox">
$(function () {
var startX, startY, endX, endY;
var size = $("#bannerm li").size();
$("#bannerm").on("touchstart",function(e){
startX = e.originalEvent.targetTouches[0].clientX;
clearInterval(t); //清除定时轮播
});
$("#bannerm").on("touchmove", function (e) {
e.preventDefault();
endX = e.originalEvent.targetTouches[0].clientX;
});
var i, _left;
var t = setInterval(move, 4000);
$("#bannerm").on("touchend", function (e) {
e.preventDefault();
if ((startX - endX) > 100) {
move()
}
else if ((startX - endX) < -100){
//初始 < 结束 左滑
i = $("#bannerm li.active").index();
i--;
if(i<0){
var lefts = -100*(size-1) +"%";
$("#bannerm ul").css("margin-left", lefts); //无缝轮播
i = size -2;
show()
}else {
show()
}
}
t = setInterval(move, 4000); //定时轮播启动
});
function move(){
//判断滑动方向，初始 > 结束 右滑
i = $("#bannerm li.active").index();
i++;
if(i == size){
$("#bannerm ul").css("margin-left", "0"); //无缝轮播
i = 1;
show();
}else{
show()
}
}
function show(){
_left = -100*i +"%";
$("#bannerm li").eq(i).addClass("active").siblings().removeClass("active");
$("#bannerm ul").animate({
"margin-left":_left
},500);
}
});
</pre>
</div>
</div>
<p>这样就完成了一个移动端自适应的轮播了，可滑动可自动轮播，而且是无缝的~ 我的代码可能还不够简洁，慢慢进步吧！</p>
<p>更新于2016.10.06</p>
<p class="center beian">© RedSpite | <a href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action">蜀ICP备16004270号</a></p>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/syntaxy.min.js"></script>
<script src="js/myjs.js"></script>
<script>
$(document).ready(function () {
$(".header-box").addClass("fadein");
$("#artical-detail p").append("<br/><br/>");
});
$(function () {
var startX, startY, endX, endY;
var size = $("#bannerm li").size();
$("#bannerm").on("touchstart", function(e) {
startX = e.originalEvent.targetTouches[0].clientX;
clearInterval(t); //清除定时轮播
});
$("#bannerm").on("touchmove", function (e) {
e.preventDefault();
endX = e.originalEvent.targetTouches[0].clientX;
});
var i, _left, numberI;
var t = setInterval(move, 4000);
$("#bannerm").on("touchend", function (e) {
e.preventDefault();
if ((startX - endX) > 100) {
move()
}
else if ((startX - endX) < -100){
//初始 < 结束 左滑
i = $("#bannerm li.active").index();
i--;
numberI = i;
if(i<0){
var lefts = -100*(size-1) +"%";
$("#bannerm ul").css("margin-left", lefts); //无缝轮播
i = size -2;
numberI = i;
show()
}else {
show()
}
}
t = setInterval(move, 4000); //定时轮播启动
});
function move(){
//判断滑动方向，初始 > 结束 右滑
i = $("#bannerm li.active").index();
i++;
numberI = i;
if(i == size){
$("#bannerm ul").css("margin-left", "0"); //无缝轮播
i = 1;
numberI = i;
show();
}else{
show()
}
}
function show(){
_left = -100*i +"%";
if(i==size-1){
numberI=0;
}
$("#bannerm li").eq(i).addClass("active").siblings().removeClass("active");
$("#bannerm ul").animate({
"margin-left":_left
},500);
$("#numberI").text(numberI+1);
}
});
</script>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>