SOURCE

 //简易下拉刷新
    var pulldownDom = document.getElementById('wrap')
    var startedPoint = 0
    var isMouseDown = false
    pulldownDom.addEventListener('transitionend', function(e) {
        pulldownDom.style.transitionDuration = '0ms'
    })
    pulldownDom.addEventListener('touchstart', function(e) {
        startedPoint = e.changedTouches[0].pageY;
    })
    pulldownDom.addEventListener('mousedown', function(e) {
        startedPoint = e.y;
        isMouseDown = true
    })
    pulldownDom.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var range = e.changedTouches[0].pageY - startedPoint;
        pulldownDom.style.transform = 'translateY(' +parseInt(range/2)    +'px)'
    })
    pulldownDom.addEventListener('mousemove', function(e) {
        e.preventDefault();
        if(!isMouseDown)return
        var range = e.y - startedPoint;
        pulldownDom.style.transform = 'translateY(' +parseInt(range/2)    +'px)'
    })
    pulldownDom.addEventListener('touchend', function(e) {
        pulldownDom.style.transform = 'translateY(0)';
        pulldownDom.style.transitionDuration = '200ms'
    })
    pulldownDom.addEventListener('mouseup', function(e) {
        isMouseDown = false;
        pulldownDom.style.transform = 'translateY(0)';
        pulldownDom.style.transitionDuration = '200ms'
    })
    
    
    
    
    
     //滑动
    var horital_e = document.getElementsByClassName('horital-w')[0]
    var horital_m = document.getElementById('horital')
    var xHoritalPLeft = parseInt(window.getComputedStyle(horital_m).left);
    var xHoritalP = 0;
    var index = 0;
    var beforePos = computeLeft(horital_m);
    var afterPos = computeLeft(horital_m)
    var isMouseDown = false
    var shape = 450
    function computeLeft(dom) {
        return parseInt(window.getComputedStyle(dom).left)
    }
    horital_e.addEventListener('transitionend', function(e) {
        horital_m.style.transitionDuration = '0ms'
    })
    horital_e.addEventListener('touchstart', function(e) {
        beforePos = computeLeft(horital_m);
        xHoritalP = e.changedTouches[0].pageX;
    })
    horital_e.addEventListener('mousedown', function(e) {
        beforePos = computeLeft(horital_m);
        xHoritalP = e.x;
        isMouseDown = true
    })
    horital_e.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var range = e.changedTouches[0].pageX - xHoritalP;
        var nummm = computeLeft(horital_m) + range / 30;
        index = Math.abs(nummm) / shape
        console.log(index)
        //15 * 50 15*150
        var max  = (horital_m.children.length-1)*shape;
        if (Math.abs(nummm) >= max ) {
            nummm = -max;
        }
        if (nummm <= 0) horital_m.style.left = nummm + 'px';
    });
    horital_e.addEventListener('mousemove', function(e) {
        if(!isMouseDown)return
        var range = e.x - xHoritalP;
        console.log(range)
        var nummm = computeLeft(horital_m) + range  /10;
        index = Math.abs(nummm) / shape
        console.log(index)
        var max  = (horital_m.children.length-1)*shape;
        if (Math.abs(nummm) >= max) {
            nummm = -max;
        }
        if (nummm <= 0) horital_m.style.left = nummm + 'px';
    });
    horital_e.addEventListener('touchend', function(e) {
        xHoritalP = e.changedTouches[0].pageX;
        afterPos = computeLeft(horital_m)
        var rangeLeft = afterPos - beforePos
        console.log(rangeLeft)
            //rangeLeft 负的向右
        var isLeft = rangeLeft < 0;
        var isMove = Math.abs(rangeLeft) > 1;
        var indexMutiple =isLeft? Math.ceil(index):Math.floor(index)
        if (isMove) {
            horital_m.style.left = -(indexMutiple * shape) + 'px'
            horital_m.style.transitionDuration = '200ms'
        }

    });
    horital_e.addEventListener('mouseup', function(e) {
        isMouseDown  = false;
        console.log('mouseup')
        xHoritalP = e.x;
        afterPos = computeLeft(horital_m)
        var rangeLeft = afterPos - beforePos
        console.log(rangeLeft)
        //rangeLeft 负的向右
        var isLeft = rangeLeft < 0;
        var isMove = Math.abs(rangeLeft) > 1;
        var indexMutiple =isLeft? Math.ceil(index):Math.floor(index)
        if (isMove) {
            horital_m.style.left = -(indexMutiple * shape) + 'px'
            horital_m.style.transitionDuration = '200ms'
        }

    });

 <div id="app">

        <ul id='wrap' class="aniamtion">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>

            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>

        <div class="horital-w">
            <ul id="horital" class='aniamtion'>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>

            </ul>
        </div>
    </div>

 * {
            margin: 0;
            padding: 0;
        }
        
        #wrap {
            position: relative;
            margin-top: 30px;
            padding-left: 50px;
        }
        
        .horital-w {
            width: 450px;
            height: 150px;
            overflow: hidden;
            margin: 0;
            background: #ffeeee;
            margin-top:60px;
        }
        
        #horital {
            width: 100000px;
            position: relative;
            left: 0;
            height: 100%;
        }
        
        #horital li {
            width: 450px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            display: inline-block;
            float: left;
        }
        
        .aniamtion {
            transform-origin: 0px 0px 0px;
            transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
            transition-duration: 0;
            transition: all;

            transform: translateY(0);
        }