Edit in JSRun

/*
 * Javascript Document
 * 
 * Creat by Nelson 2016/08/25
 * 
 * Website:https://segmentfault.com/u/nelson2016
 * 
 * QQ:616859570
 * 
 * Email:lirongkun@wangjingcity.com,Nelson_Lee@outlook.com,Nelson2016@aliyun.com
 * 
 * */
var nelsonVerticalSlider = (function(doc,exportName){
	var _console = window.console&&window.console.log;
	var DISTANCE = 20;
	var LONG_DISTANCE = 100;
	var SENSIBILITY = 200;
	
	var $ = function(dom){
		if((typeof dom).toLowerCase() != "object"){
			if(_console){console.error('nelsonVS()所传入的元素无法执行此操作')}
			return;
		};
		if(!('ontouchstart' in window)){
			if(_console){console.error('您的浏览器不支持touch事件,请在手机浏览器中查看')}
			return;
		}
		nelsonVS.dom = dom;
		nelsonVS.minHeight = dom.offsetHeight;
		nelsonVS.ul = dom.children[0];
		nelsonVS.lis = nelsonVS.ul.children;
		nelsonVS.num = nelsonVS.lis.length;
		nelsonVS.index = 0;
		nelsonVS.isSliding = false;
		nelsonVS.prograssBar = "";
		return this;
		
	}
	$.prototype = {
		moveInterval:"",
		init:function(){
			LONG_DISTANCE = nelsonVS.minHeight / 2;
			for(var i = 0 ; i < nelsonVS.lis.length ; i++){
				nelsonVS.lis[i].style.height = nelsonVS.minHeight + "px";
			}
			nelsonVS.ul.style.height = nelsonVS.num * nelsonVS.minHeight + "px";
			var prograssBarDom = document.createElement("ul");
			prograssBarDom.className = "prograssBar";
			var fragment = document.createDocumentFragment();
			for(var i = 0,linode = "" ; i < nelsonVS.num ; i ++){
				linode = document.createElement("li");
				linode.className = "prograssBarItem" + (i==0?" active":"");
				fragment.appendChild(linode);
			}
			prograssBarDom.appendChild(fragment);
			nelsonVS.dom.appendChild(prograssBarDom);
			nelsonVS.prograssBar = prograssBarDom.children;
			prograssBarDom = null;fragment = null;
			this.slide();
			return this;
		},
		slide:function(){
			var STARTY,ENDY,EVENT_TYPE,START_POS,that = this,TIMESTAMP,TIMESTAMP_END;
			nelsonVS.dom.addEventListener("touchstart",function(e){
				e.preventDefault();
				TIMESTAMP = (new Date()).valueOf();
				START_POS = nelsonVS.ul.offsetTop;
				STARTY = e.touches[0].clientY;
				if(that.moveInterval){
					clearInterval(that.moveInterval);
				}
			})
			nelsonVS.dom.addEventListener("touchmove",function(e){
				e.preventDefault();
				ENDY = e.targetTouches[0].clientY;
				nelsonVS.ul.style.top = START_POS + ENDY - STARTY + "px";
			})
			nelsonVS.dom.addEventListener("touchend",function(e){
				e.preventDefault();
				TIMESTAMP_END = (new Date()).valueOf();
				var DIS = ENDY - STARTY;
				if(DIS > DISTANCE){
					EVENT_TYPE = "DOWN";
				}else if(DIS < -DISTANCE){
					EVENT_TYPE = "UP";
				}
				if(Math.abs(DIS) > DISTANCE){
					if(TIMESTAMP_END - TIMESTAMP < SENSIBILITY){
						that.checkAction(EVENT_TYPE);
					}else{
						if(Math.abs(DIS) > LONG_DISTANCE){
							that.checkAction(EVENT_TYPE);
						}else{
							that.action(EVENT_TYPE);
						}
					}
				}else{
					that.action();
				}
			})
		},
		checkAction:function(et){
			if((et == "UP" && (nelsonVS.index - 1) <= -nelsonVS.num) || (et == "DOWN" && (nelsonVS.index + 1) > 0)){
				this.action();
				return;
			}
			switch(et){
				case 'UP':
					nelsonVS.isSliding = true;
					nelsonVS.index--;
					this.action(et);
					break;
				case 'DOWN':
					nelsonVS.index++;
					nelsonVS.isSliding = true;
					this.action(et);
					break;
				default:
					this.action();
			}
		},
		action:function(et){
			var AIM_POS = nelsonVS.minHeight * nelsonVS.index;
			var DIS = AIM_POS - nelsonVS.ul.offsetTop;
			var speed = (DIS) / 3;
			var that = this;
			that.moveInterval = setInterval(function(){
				nelsonVS.ul.style.top = nelsonVS.ul.offsetTop + speed + "px";
				if(Math.abs(AIM_POS - nelsonVS.ul.offsetTop) < speed || Math.abs(speed) <= 0.5){
					nelsonVS.ul.style.top = AIM_POS + "px";
					speed = (DIS) / 3;
					if(et){
						var para = {};
						para.index = -nelsonVS.index;
						para.item = nelsonVS.lis[para.index];
						if(that.onSlideCallBack){
							that.onSlideCallBack(para);
							if(that.onSlideUpCallBack||that.onSlideDownCallBack){
								console.error("在设置滚动回调的时候不可同时设置单向滚动回调")
							}
						}else{
							if(that.onSlideUpCallBack && et == "UP"){
								that.onSlideUpCallBack(para);
							}
							if(that.onSlideDownCallBack && et == "DOWN"){
								that.onSlideDownCallBack(para);
							}
						}
					}
					that.changePrograssBar();
					clearInterval(that.moveInterval);
					nelsonVS.isSliding = false;
				}else{
					speed = (AIM_POS - nelsonVS.ul.offsetTop) / 5;
				}
			},10)
		},
		changePrograssBar:function(){
			for(var i = 0 ; i < nelsonVS.prograssBar.length ; i++){
				if(nelsonVS.prograssBar[i].classList.contains("active")){
					nelsonVS.prograssBar[i].classList.remove("active");
					break;
				}
			}
			nelsonVS.prograssBar[-nelsonVS.index].classList.add("active");
		},
		onSlideCallBack:"",
		onSlide:function(fun){
			if((typeof fun).toLowerCase() == "function"){
				this.onSlideCallBack = fun;
			}
		},
		onSlideUpCallBack:"",
		onSlideTop:function(fun){
			if((typeof fun).toLowerCase() == "function"){
				this.onSlideUpCallBack = fun;
			}
		},
		onSlideDownCallBack:"",
		onSlideDown:function(fun){
			if((typeof fun).toLowerCase() == "function"){
				this.onSlideDownCallBack = fun;
			}
		},
		getCurrentIndex:function(){
			if(nelsonVS.isSliding){
				console.error("动作执行中,不可通过此方法获取,可通过onslide方法获取");
				return;
			}
			return -nelsonVS.index;
		}
	}
	
	function nelsonVS(dom){
		return new $(dom);
	}
	
	window[exportName] = nelsonVS;
	
})(document,'nelsonVS');

var si = new nelsonVS(document.getElementById("nelsonVerticalSlider")).init();
si.onSlide(function(e){
  if(e.index){
  }else{
  }
})
<div class="nelsonVerticalSlider" id="nelsonVerticalSlider">
  <ul class="nelsonVerticalSliderList" id="slider">
    <li class="nelsonVerticalSliderItem">
      <img src="http://img0.imgtn.bdimg.com/it/u=3539694374,2907525638&fm=21&gp=0.jpg"/>
    </li>
    <li class="nelsonVerticalSliderItem">
      <img src="http://dealer0.autoimg.cn/dl/77551/newsimg/130594779627204487.jpg"/>
    </li>
    <li class="nelsonVerticalSliderItem">
      <img src="http://club2.autoimg.cn/album/g7/M04/7A/FF/userphotos/2015/09/15/11/500_wKgH3VX3i96APL6JABE9o354S9Q057.jpg"/>
    </li>
  </ul>
 </div>
*{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;margin: 0;padding: 0;}
html,body{
	background-color: #FFFFFF;
	font-size: 0.625rem;
}
ul{
	width: 100%;
}
li{
	list-style: none;
}
img{display: block;}
span{display: block;}
p,span{
	font-size: 1.2rem;
}
h2{
	font-size: 1.6rem;
}
h3{
	font-size: 1.4rem;
}
h4{
	font-size: 1.2rem;
}
input,button,textarea{
	box-shadow: none;
	-webkit-box-shadow: none;
	outline: none;
}
/*清除浮动 解决高度塌陷*/
.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
.afterLine:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #CCCCCC;
	height: 1px;
	-webkit-transform: scaleY(.5);
	   -moz-transform: scaleY(.5);
		-ms-transform: scaleY(.5);	
			transform: scaleY(.5);
}
.beforeLine:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #CCCCCC;
	height: 1px;
	-webkit-transform: scaleY(.5);
	   -moz-transform: scaleY(.5);
		-ms-transform: scaleY(.5);	
			transform: scaleY(.5);
}

/*以上都是reset*/

html,body{height: 100%;}
.nelsonVerticalSlider{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.nelsonVerticalSlider .nelsonVerticalSliderList{
	height: 100%;
	position: absolute;
	list-style: none;
	z-index: 50;
	top: 0;
	left: 0;
}
.nelsonVerticalSlider .nelsonVerticalSliderList .nelsonVerticalSliderItem{
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
}
.nelsonVerticalSlider .nelsonVerticalSliderList .nelsonVerticalSliderItem img{
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	 	-ms-transform: translateX(-50%);
	 	 -o-transform: translateX(-50%);
			transform: translateX(-50%);
} 
.nelsonVerticalSlider .prograssBar{
	position: absolute;
	list-style: none;
	left: 20px;
	top: 50%;
	z-index: 60;
	width: 10px;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	 	-ms-transform: translateX(-50%);
	 	 -o-transform: translateX(-50%);
			transform: translateX(-50%);
	
}
.nelsonVerticalSlider .prograssBar .prograssBarItem{
	width: 10px;
	height: 10px;
	display: block;
	background: #F7F7F7;
	margin-top: 10px;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%;
}
.nelsonVerticalSlider .prograssBar .prograssBarItem.active{background: #333333;}
.nelsonVerticalSlider .prograssBar .prograssBarItem:first-child{margin: 0;}