WEB网页， webkit 内核手机，slider 上下滑动弹性切换效果（不采用任何插件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>slider</title>
<style>
*{
    padding:0;
    margin:0;
}
html ,
body ,
#slider {
    height:100%;
    overflow: hidden;
}
.s-list{
    height:400%;
    -webkit-transition:.3s;
    -webkit-transform:translate3d(0px,0px,0px);
}
.s-list>li{
    height:25%;
}
.s-list>li:nth-child(1){background:#00be9c;}
.s-list>li:nth-child(2){background:#50d78a;}
.s-list>li:nth-child(3){background:#2c97df;}
.s-list>li:nth-child(4){background:#9c56b8;}
</style>
</head>
<body>
     
 
 
<section id="slider">
    <ul class="s-list">
        <li>第一屏</li>
        <li>第二屏</li>
        <li>第三屏</li>
        <li>第四屏</li>
    </ul>
</section>
 
 
 
<script>
     
    function slider( id ){
        //获取所要的 DOM 元素
        var oSlider = document.getElementById('slider');
        var oUl = oSlider.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var winHeight = document.body.clientHeight;
        var startY , offsetY , num = 0 , addNum = 0 ;
 
 
        //开始
        var sliderStart = function( event ){
            this.startY = event.touches[0].pageY;
        }
 
 
        //移动
        var sliderMove = function( event ){
            //单手操作才执行
            if ( event.targetTouches.length == 1 ) {
                event.preventDefault();　　　　　　　　　　　　　　　　　　　　
                //获取移动的距离
                this.offsetY = event.targetTouches[0].pageY - this.startY;
 
                //当前的页数值与滑动距离数字累加，从而产生弹性效果
                addNum += this.offsetY;
                 
                //判断正数还是负数来进行弹性的方向
                if ( this.offsetY > 0 ){
                    addNum = -num * winHeight + winHeight/4;
                }else{
                    addNum = -num * winHeight - winHeight/4;
                }
 
                oUl.style['-webkit-transform'] = 'translate3d(0px,'+ addNum +'px,0px)';
            }
        }
 
 
        //结束
        var sliderEnd = function(){
 
            //负数为往上，正数为往下
            if ( this.offsetY > winHeight / 5 ) {
                // console.log('向上');
                if ( num > 0 ) {
                    num--;
                }else{
                    nun = 0;
                }
            }else if ( this.offsetY < -winHeight / 5 ) {
                // console.log('向下');
                if ( num < aLi.length - 1 ) {
                    num++;
                }else{
                    num = aLi.length -1;
                }
            }
 
            //真实的切换
            oUl.style['-webkit-transform'] = 'translate3d(0px,'+ -num*winHeight +'px,0px)';
 
            //让累加数值为当前页面切换到的数值
            addNum = -num*winHeight;
        }
 
 
        //让最顶层的 DIV 处理事件，然而 ul 根据，最顶层的 DIV 操作来移动
        oSlider.addEventListener('touchstart' , sliderStart);
        oSlider.addEventListener('touchmove' , sliderMove);
        oSlider.addEventListener('touchend' , sliderEnd);
    }
 
    slider('slider');
 
</script>
</body>
</html>
WEB网页 ， webkit 内核手机，slider 上下滑动弹性切换效果（不采用任何插件）

WEB网页， webkit 内核手机，slider 上下滑动弹性切换效果（不采用任何插件）
