使用jq 仿 swper 图片左右滚动

<div>
<div class="change-num">1/4</div>
    <div class="box">
        <div class="box-ul">
            <div class="box-li">
                <span></span>
                <img src="http://pic71.nipic.com/file/20150610/13549908_104823135000_2.jpg">
            </div>
            <div class="box-li">
                <span></span>
                <img src="http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png">
            </div>
            <div class="box-li">
                <span></span>
                <img src="http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg">
            </div>
            <div class="box-li">
                <span></span>
                <img src="http://res.supervolleyball.com/1/advisoryrelease/jpg/0107c578-01c6-4205-b397-31afe7a88d87.jpg">
            </div>
        </div>
    </div>
    <div class="text-contet">
        文字文字文字文字文字文字文字文字
    </div>
</div>

<script>
$(".text-contet").css("height", innerHeight - 390 + 'px');

/*

* sX 记录每次点击的x轴位置

* mX 记录每次滑动结束时的x轴位置

* msX = mX - sX 每次滑动长度

* index 当前图片显示的序号

* num 图片的总数量

* lN 当前图片的偏移量

* nLN 移动成功后的图片left偏移量

*/

var changeNum = $(".change-num");
        var boxs = $(".box");
        var box = $(".box-ul");
        var num = box.children(".box-li").length, index = 1;
        var sX, mX, msX, lN = 0, nLN = 0;
        boxs.on("touchstart", function (ev) {
            ev = ev || event
            ev.preventDefault();
            sX = ev.originalEvent.changedTouches[0].clientX;
        }).on("touchmove", function (ev) {
            ev = ev || event;
            ev.preventDefault();
            mX = ev.originalEvent.changedTouches[0].clientX;
            msX = mX - sX;
            nLN = lN + msX;

　　　　　　　　/*

　　　　　　　　* 如果nLN大于0, 那么不可以滑动

　　　　　　　　* 如果nLN小于(1 - num) * 360 , 那么不可以滑动

　　　　　　　　*/

if (nLN > 0) nLN = 0;
            if (nLN < (1 - num) * 360) nLN = (1 - num) * 360;
            box.css("left", nLN + 'px');
        }).on("touchend", function (ev) {
            ev = ev || event;
            ev.preventDefault();
            if (msX > 100) {
　　　　　　　　　　//右滑动

                nLN = lN + 360;
                index --;
            }
            else if (msX < -100) {

　　　　　　　　// 左滑动

                nLN = lN - 360;
                index ++;
            }
            else nLN = lN;
            if (nLN > 0) {
                nLN = 0
                index = 1;
            }
            if (nLN < (1 - num) * 360) {
                nLN = (1 - num) * 360;
                index = num;
            }
            box.animate({ left: nLN + "px" }, 200);

　　　　　　　　//图片滑动成功, 恢复默认值

            lN = nLN; mX = 0; msX = 0;
            changeNum.text(index + "/" + num);
        });
</script>
<style>

.box {

　　 360px;

　　height: 300px;

　　overflow: hidden;

　　background: #e5e5e5;

}

.box-ul {

　　position: relative;

　　height: 300px;

　　left: 0;

　　font-size: 0;

　　white-space: nowrap;

}

.box-li {

　　display: inline-block;

　　vertical-align: middle;

　　 360px;

　　height: 300px;

　　text-align: center;

}

.box-li > span {

　　display: inline-block;

　　vertical-align: middle;

　　 0px;

　　height: 300px;

}

.box-li > img {

　　display: inline-block;

　　vertical-align: middle;

　　max-height: 300px;

　　max- 360px;

}

.text-contet {

　　-webkit-overflow-scrolling: touch;

　　overflow-x: hidden;

　　overflow-y: scroll;

　　 360px;

}

</style>