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;
}
});
});
时间： 2024-10-12 23:21:39