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