Skip to content

Commit 2d5edc2

Browse files
bjtqtibjtqti
committed
add touchmove
1 parent 5ee642e commit 2d5edc2

File tree

7 files changed

+166
-49
lines changed

7 files changed

+166
-49
lines changed

‎slider/images/pic21.gif‎

34.8 KB
Loading

‎slider/images/pic22.gif‎

34.4 KB
Loading

‎slider/images/pic23.gif‎

38.1 KB
Loading

‎slider/images/pic24.gif‎

33.1 KB
Loading

‎slider/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
<body>
1111
<div id="slider" class="slider-wrapper">
1212
<ul class="slider-items">
13-
<li class="slider-item">1</li>
14-
<li class="slider-item">2</li>
15-
<li class="slider-item">3</li>
13+
<li class="slider-item"><img src="images/pic21.gif" alt="1"></li>
14+
<li class="slider-item"><img src="images/pic22.gif" alt="2"></li>
15+
<li class="slider-item"><img src="images/pic23.gif" alt="3"></li>
1616
</ul>
1717
</div>
1818
<script>

‎slider/slider.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ ul,li {
2020
height: 220px;
2121
border: 1px solid gray;
2222
overflow: hidden;
23-
box-sizing:border-box;
2423
}
2524

2625
.slider-items {
@@ -37,4 +36,12 @@ ul,li {
3736
left: 0;
3837
z-index: 1;
3938
text-align: center;
39+
}
40+
41+
.slider-item > img {
42+
width: 100%;
43+
-webkit-user-select: none;
44+
-ms-user-select: none;
45+
user-select: none;
46+
pointer-events: none;
4047
}

‎slider/slider.js‎

Lines changed: 155 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,58 @@
2020
"use strict";
2121

2222
var version = '1.0.0';
23+
var defaultOption = {
24+
speed:'300ms',
25+
delay:'5000',
26+
bounce:0.3,
27+
auto:true
28+
};
2329

24-
function Slider( selector, context ) {
25-
return new Slider.init( selector, context );
30+
var extend = function(target,source){
31+
var res = {};
32+
if(Object.assign){
33+
return Object.assign(res,target,source);
34+
}
35+
for(var i in target){
36+
res[i] = target[i];
37+
}
38+
if(source && typeof source === 'object'){
39+
for(var i in source){
40+
if(res[i] !== null && res[i] !== undefined){
41+
res[i] = source[i]
42+
};
43+
}
44+
}
45+
return res;
46+
}
47+
48+
function Slider( selector, options ) {
49+
var config = extend(defaultOption,options);
50+
return new Slider.init( selector, config );
2651
}
2752

28-
Slider.init=function(selector, context){
53+
Slider.init=function(selector, options){
2954
var wrap = document.querySelector(selector);
3055
var box = wrap.children[0];
3156
var pages = box.children;
57+
this.wrap = wrap;
3258
this.box = box;
3359
this.pages = pages;
34-
this.screenWidth = window.innerWidth;
60+
this.speed = options.speed;
61+
this.delay = options.delay;
62+
this.auto = options.auto;
63+
this.bounce = options.bounce;
3564
this.pageLength = pages.length;
3665
this.initPages();
3766
}
3867

39-
Slider.init.prototype = Slider.prototype = {
68+
Slider.prototype = {
4069
initPages:function(){
4170
var length = this.pageLength;
71+
if(length<1){
72+
console.warn('Slider children require at least one');
73+
return false;
74+
}
4275
if(length < 3){
4376
var lastItem = this.pages[length-1];
4477
while(length < 3) {
@@ -50,73 +83,150 @@
5083
this.prevIndex = length - 1;
5184
this.currIndex = 0;
5285
this.nextIndex = this.currIndex + 1;
53-
this.translate(this.prevIndex,'-100%');
54-
this.translate(this.currIndex,'0px');
55-
this.translate(this.nextIndex,'100%');
56-
this.auto()
86+
this.reset();
87+
this.width = window.innerWidth;
88+
this.auto && this.autoRun();
89+
this.wrap.addEventListener('touchstart',this,false);
90+
this.wrap.addEventListener('touchmove',this,false);
91+
this.wrap.addEventListener('touchend',this,false);
92+
this.wrap.addEventListener('mousedown',this,false);
93+
this.wrap.addEventListener('mousemove',this,false);
94+
document.addEventListener('mouseup',this,false);
5795
},
5896
handleEvent:function(e){
59-
97+
var type = e.type;
98+
if(e.touches){
99+
console.log(e.touches[0])
100+
e = e.touches[0]||e.changedTouches[0];
101+
}
102+
switch(type){
103+
case 'mousedown':
104+
case 'touchstart':
105+
this.axis.x = e.clientX;
106+
this.axis.y = e.clientY;
107+
this.enableSlide = true;
108+
this.auto = false;
109+
clearTimeout(this.timmerId);
110+
break;
111+
case 'mouseup':
112+
case 'touchend':
113+
var distance = e.clientX - this.axis.x;
114+
var bounce = Math.round(this.width * this.bounce);
115+
this.enableSlide = false;
116+
if(Math.abs(distance)>bounce){
117+
distance > 0 ? this.prev() : this.next();
118+
}else{
119+
//反弹
120+
if(distance>0){
121+
this.css(this.currIndex,this.animate('0px'));
122+
this.css(this.prevIndex,this.animate('100%'));
123+
}else{
124+
this.css(this.currIndex,this.animate('0px'));
125+
this.css(this.nextIndex,this.animate('100%'));
126+
}
127+
}
128+
break;
129+
case 'mousemove':
130+
case 'touchmove':
131+
var distance = e.clientX - this.axis.x;
132+
if(this.enableSlide){
133+
this.move(distance);
134+
}
135+
break;
136+
default:
137+
break;
138+
}
139+
60140
},
61-
62-
setStyle:function(index,distance){
63-
var element = this.pages[index];
64-
this.translate(index,distance);
65-
element.style.WebkitTransition = 'all 6s ease';
66-
element.style.transition = 'all 6s ease';
67-
element.style.visibility = 'visible';
68-
element.style.zIndex = 10;
141+
reset:function(){
142+
this.css(this.prevIndex,this.translate('-100%'));
143+
this.css(this.currIndex,this.translate('0px'));
144+
this.css(this.nextIndex,this.translate('100%'));
145+
for(var i=this.nextIndex+1;i<this.pageLength-1;i++){
146+
this.css(i,this.translate('100%'));
147+
}
148+
this.axis = {
149+
x:0,
150+
y:0
151+
}
69152
},
70-
move:function(index,distance){
153+
css:function(index,style){
71154
var element = this.pages[index];
72-
this.translate(index,distance);
73-
element.style.WebkitTransition = 'none';
74-
element.style.transition = 'none';
75-
element.style.visibility = 'hidden';
76-
element.style.zIndex = 5;
155+
for(var i in style){
156+
element.style[i] = style[i];
157+
}
77158
},
78-
translate:function(index,distance){
79-
var element = this.pages[index];
80-
element.style.WebkitTransform = "translate3d(" + distance + ",0,0)";
81-
element.style.transform = "translate3d(" + distance + ",0,0)";
159+
move:function(distance){
160+
var width = this.width;
161+
if(distance > 0){
162+
//prev
163+
this.css(this.currIndex,this.translate(distance+'px'));
164+
this.css(this.prevIndex,this.translate((distance-width)+'px'));
165+
}else{
166+
//next
167+
this.css(this.currIndex,this.translate(distance+'px'));
168+
this.css(this.nextIndex,this.translate((width+distance)+'px'));
169+
}
170+
},
171+
translate:function(distance){
172+
return {
173+
WebkitTransform:"translate3d(" + distance + ",0px,0px)",
174+
transform:"translate3d(" + distance + ",0px,0px)"
175+
}
176+
},
177+
animate:function(distance){
178+
return {
179+
WebkitTransform:"translate3d(" + distance + ",0px,0px)",
180+
transform:"translate3d(" + distance + ",0px,0px)",
181+
WebkitTransition : 'all '+ this.speed+' ease',
182+
transition:'all '+ this.speed+' ease',
183+
zIndex:5
184+
}
185+
},
186+
noAnimate:function(distance){
187+
return {
188+
WebkitTransform:"translate3d(" + distance + ",0px,0px)",
189+
transform:"translate3d(" + distance + ",0px,0px)",
190+
WebkitTransition : 'none',
191+
transition:'none',
192+
zIndex:-1
193+
}
82194
},
83195
next:function(){
84-
this.setStyle(this.currIndex,'-100%');
85-
this.setStyle(this.nextIndex,'0px');
86-
this.move(this.prevIndex,'100%');
87196
var length = this.pageLength-1;
88-
var prevIndex = this.prevIndex;
197+
this.css(this.currIndex,this.animate('-100%'));
198+
this.css(this.nextIndex,this.animate('0px'));
199+
this.css(this.prevIndex,this.noAnimate('100%'));
89200
this.prevIndex = this.currIndex;
90201
this.currIndex = this.nextIndex;
91202
if(++this.nextIndex > length){
92-
this.nextIndex = prevIndex;
203+
this.nextIndex = 0;
93204
}
94-
this.step();
95205
},
96206
prev:function(){
97207
var length = this.pageLength-1;
208+
this.css(this.currIndex,this.animate('100%'));
209+
this.css(this.prevIndex,this.animate('0px'));
210+
this.css(this.nextIndex,this.noAnimate('-100%'));
98211
this.nextIndex = this.currIndex;
99212
this.currIndex = this.prevIndex;
100213
if(--this.prevIndex<0){
101214
this.prevIndex = length;
102215
}
103-
this.step();
104216
},
105-
auto:function(){
217+
autoRun:function(){
106218
var that = this;
107-
setTimeout(function(){
219+
if(!this.auto){
220+
return false;
221+
}
222+
this.timmerId = setTimeout(function(){
108223
that.next();
109-
that.auto();
110-
},3000)
111-
},
112-
step:function(){
113-
114-
console.log(this.currIndex)
224+
that.autoRun();
225+
},this.delay);
115226
}
116227
}
117228

118-
119-
229+
Slider.init.prototype = Slider.prototype;
120230

121231
if(!noGlobal){
122232
window.Slider = Slider;

0 commit comments

Comments
 (0)