forked from liutian1937/JTouch
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcarousel.html
80 lines (68 loc) · 2.14 KB
/
carousel.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
<!DOCTYPE html>
<html>
<head>
<title>Javascript Touch Event</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "viewport" content = "width = device-width">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script src="JTouch-1.1/JTouch.js" type="text/javascript"></script>
<script src="js/translate.js" type="text/javascript"></script>
<style>
html,body{width:100%;height:100%;margin:0;padding:0;}
body{background:#999;}
ul,li{list-style:none;margin:0;padding:0;}
#touch{width:100%;height:100%;overflow:hidden;}
#touch ul{height:100%;}
#touch li{height:100%;width:100%;float:left;text-align:center;}
.green{background:#42d692;}
.blue{background:#4986e7;}
.red{background:#d06b64;}
.purple{background:#cd74e6;}
#circle{position:absolute;bottom:10px;width:100%;height:20px;line-height:20px;z-index:200;text-align:center;}
#circle a{width:8px;height:8px;border-radius:8px;background:#636363;display:inline-block;margin:0px 5px;box-shadow:0px 0px 1px rgba(0,0,0,0.5);-webkit-transition:all 0.5s linear;font-size:0;}
#circle a.cur{background:#fff;}
.animate {-webkit-transition: all .3s linear;transition: all .3s linear;}
</style>
</head>
<body>
<div id="touch">
<ul id="liWrap">
<li class="green"></li>
<li class="blue"></li>
<li class="red"></li>
<li class="purple"></li>
</ul>
</div>
<script>
//Translate Init
var Trans = new Translate({
obj:document.getElementById('liWrap'),
circle:true
});
var objTouch = document.getElementById('touch');
var Touches = JTouch(objTouch);
Touches.on('flick',function(evt,data){
//轻拂
switch(data['direction']){
case 'left' :
Trans.next();
break;
case 'right':
Trans.prev();
break;
};
}).on('swipe',function(evt,data){
if(data['direction'] == 'left' || data['direction'] == 'right'){
Trans.offset(data['x']);
};
if(data['status'] == 'end'){
Trans.end(data['x']);
}
}).on('mousewheel',function(evt,data){
if(!Trans.isAnimate){
(data['direction'] === 'down') ? Trans.next() : Trans.prev();
};
});
</script>
</body>
</html>