老规矩~ 上DEMO，过过瘾先：（不过这个demo需要你在手机中查看啦~）
再上源码：
DEMO很简单，左侧有个纵向的图片数量以及当前图片索引的展示，然后整个是一个纵向可触摸滑动的列表，可以自定义滑动回调函数。
一. 先说原理
首先图片肯定是纵向排列的了
就像下边这张图一样
灰色方块就是一堆纵向排列的图片
红色方框中的是显示区域，溢出隐藏
然后在动态改变方框内部的div的top值来切换显示在方框中的不同图片~
二. 码代码
首先初始化容器高度，以及添加纵向的控制条
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; } 然后，绑定滚动的事件
绑定touchstart记录手指开始触摸的位置
绑定touchmove实时更新手指触摸点位于屏幕的位置，并使图片容器随着手指滚动
绑定touchend更新手指离开时候的位置，并根据位置来判断是是将图片归位不进行滚动，还是滚动到下一张/上一张图片（触发临界值可自行设定）
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(); } }) 检测滑动方向以及临界值判断
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(); }} 进行滚动处理
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) 更新控制条的当前索引值位置
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"); 其他就是一些回调函数啦~