首页 > 代码库 > 移动端列表循环滑动
移动端列表循环滑动
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; } }); });
移动端列表循环滑动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。