码迷,mamicode.com
首页 > 其他好文 > 详细

使用jq 仿 swper 图片左右滚动

时间:2018-11-07 16:35:24      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:origin   color   gen   div   client   mmu   ++   inner   image   

<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);
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>

 

使用jq 仿 swper 图片左右滚动

标签:origin   color   gen   div   client   mmu   ++   inner   image   

原文地址:https://www.cnblogs.com/shenjilin/p/9923208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!