移动端列表循环滑动

浏览数：18 / 时间：2015年06月11日

1、循环滑动效果（先看效果）

2、如何布局（以下是我的思路）

   <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #scroll div {
            border: 1px solid red;
            float: left;
            background: #abcdef;
          
            text-align: center; 
        }
    </style>
</head>
<body>

    <div id="container" style="position: relative; width: 100%; height: 90%; overflow: hidden;">
        <div id="scroll" style="position: absolute; height: 100%;">
            <div>5</div>
            
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            
            <div>1</div>
        </div>
    </div>
</body>

3、触屏移动的算法

具体代码如下：

   var scroll = document.getElementById(‘scroll‘);
            var container = document.getElementById("container")



            var clientAtt =
            {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            };
            //设置大小
            container.style.width = clientAtt.width + ‘px‘;
            container.style.height = clientAtt.height + ‘px‘;
            scroll.style.width = clientAtt.width * 7 + ‘px‘;
            scroll.style.left = -clientAtt.width + ‘px‘;
            $("#scroll  div").css({width:clientAtt.width-2+‘px‘,height:clientAtt.height-2+‘px‘,‘line-height‘:clientAtt.height-2+‘px‘});

            
            var initLeft = 0;//物体初始距离
            var disStart = 0;//手指触屏距离

            scroll.addEventListener("touchstart", function (ev) {

                var oEvent = ev || event;
                oEvent.preventDefault();
                var touch = oEvent.touches[0];//获取手指触屏信息
                disStart = touch.clientX;//手指的触屏起点X
                initLeft = this.offsetLeft;//物体的起点left
            }, false)

            scroll.addEventListener("touchmove", function (ev) {
                var oEvent = ev || event;
                oEvent.preventDefault();


                if (oEvent.targetTouches.length == 1) {
                    var touch = oEvent.touches[0];//获取手指触屏信息
                    var disEnd = touch.clientX;//手指触屏X
                    //当前物体的移动距离=手指触屏位置-手指触屏起始位置+物体的起始位置
                    var moveDis = disEnd - disStart + initLeft;
                    //滑动边界处理
                    if (Math.abs(moveDis) > clientAtt.width * 6) { 
                        moveDis = -clientAtt.width * 6;
                    }
                    if (moveDis > 0) {
                        moveDis = 0;
                    }
                    this.style.left = moveDis + ‘px‘;

                } 
            }, false);

4、手指离开屏幕的特殊处理

 var currIndex = 1;//第一个
            scroll.addEventListener(‘touchend‘, function (ev) {


                var absLeft = Math.abs(this.offsetLeft);
                if (absLeft != Math.abs(initLeft)) {


                    if (absLeft > Math.abs(initLeft)) {
                        currIndex++;

                    }
                    else {
                        currIndex--;
                    }
                }
                currIndex = currIndex > 6 ? 6 : currIndex;

                $(this).stop(true).animate({ "left": -currIndex * clientAtt.width + ‘px‘ }, 300, function () {
                    //循环：首尾处理
                    /*
                      第5个元素 如果继续向左滑 出现第1个 滑动到第1个的时候 如何和第2个元素相接？？？？
                      为了处理这个问题，当手指松开的时候 立即将当期物体的位置 改成 滑动到第1个元素时的距离 

                      第1个元素 继续向右滑 同理处理
                    */
                    if (currIndex == 6) {
                        $(this).css("left", -clientAtt.width + ‘px‘);
                        currIndex = 1;
                    }
                    else if (currIndex == 0) {
                        $(this).css("left", -5 * clientAtt.width + ‘px‘);
                        currIndex = 5;

                    }

                });

            });