console
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);
}
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;}