使用jq 仿 swper 图片左右滚动

Posted 2021-01-18 shenjilin

<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/[email protected]_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‘);
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;
            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>