1. 程式人生 > >使用jq 仿 swper 圖片左右滾動

使用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/[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>