（這個(gè)輪播代碼不是我自己所寫(xiě)，是偶然游覽一個(gè)簡(jiǎn)友的主頁(yè)看到的冻记，今天剛看了事件晦毙，決定來(lái)逐行分析一下這個(gè)代碼）
首先，移動(dòng)端與電腦端不同的是移動(dòng)端只能通過(guò)觸摸和手勢(shì)來(lái)發(fā)生行為洽蛀，所以我們要用到j(luò)s中的與觸摸操作有關(guān)的新事件摹迷。其實(shí)我們輪播的原理和以前相同，都是通過(guò)改變?cè)氐奈恢脕?lái)控制圖片的出現(xiàn)郊供，但讓我們不是很上手的峡碉，是那些用于跟蹤觸摸的屬性。
下面驮审，我簡(jiǎn)單介紹一下與觸摸相關(guān)的知識(shí)
觸摸事件
- touchstart：當(dāng)手指觸摸屏幕時(shí)觸發(fā)鲫寄，一只手指放在屏幕上也會(huì)觸發(fā)
- touchmove：當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)吉执。在這個(gè)事件發(fā)生期間可以用preventDefault()可以阻止?jié)L動(dòng)。
- touchend：手指從屏幕移開(kāi)時(shí)觸發(fā)地来。
- touchcancel：當(dāng)系統(tǒng)停止跟蹤觸發(fā)時(shí)觸發(fā)戳玫。
上面這幾個(gè)事件都會(huì)冒泡，也都可以取消未斑。
屬性
- touches:表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象的數(shù)組
- targetTouches:特定于事件目標(biāo)的Touch對(duì)象的數(shù)組咕宿。（簡(jiǎn)單點(diǎn)可以理解為手指觸摸屏幕的位置）
- changeTouches表示自上次觸摸以來(lái)發(fā)生了什么改變的touch對(duì)象的數(shù)組。（手指離開(kāi)的位置）
每個(gè)touch對(duì)象包括下列屬性
- clientX:觸摸目標(biāo)在視口中的x坐標(biāo)
- clientY:觸摸目標(biāo)在視口中的y坐標(biāo)
- identifier:標(biāo)識(shí)觸摸的唯一ID
- pageX:觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)
- pageY:觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)
- screenX:觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)
- screenY:觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)
- target:觸摸的dom節(jié)點(diǎn)目標(biāo)
<!DOCTYPE html>
<html>
<head>
<title>移動(dòng)端輪播</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 980px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#box ul {
width: 4900px;
height: 100px;
position: relative;
transform: translateX(-980px);
}
#box ul li{
width: 980px;
height: 100px;
float: left;
list-style-type: none;
text-align: center;
color: #fff;
line-height: 100px;
font-size: 30px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.children;//這樣就可以把所有l(wèi)i標(biāo)簽獲取到了
var iNow = 1;
var x = -iNow*aLi[0].offsetWidth;//li標(biāo)簽的位置
var bReady = true;
oUl.addEventListener('touchstart',function(ev){//當(dāng)手指觸摸屏幕的時(shí)候觸發(fā)事件蜡秽，讓li的位置隨手指滑動(dòng)而改變
if(bReady == false){return;}
bReady = false;
var downX = ev.targetTouches[0].pageX; //記錄觸摸位置
var disX = downX - x;//下一個(gè)li要移動(dòng)到的位置
function fnMove(ev) {
x = downX-disX;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
}
function fnEnd(ev){
var upX = ev.changedTouches[0].pageX;//離開(kāi)的位置
if(Math.abs(upX - downX)>50){
//左邊移動(dòng)
if(upX - downX<0){
iNow++;
if(iNow==aLi.length){iNow=aLi.length-1;}
}else{
//右邊移動(dòng)
iNow--;
if(iNow==-1){iNow=0;}
}
}
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
oUl.style.transition = '200ms all ease';
function tEnd(){
if(iNow==4){
iNow=1;
}
if(iNow==0){iNow=3;}
oUl.style.transition = 'none'
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
bReady = true;
}
oUl.addEventListener('transitionend',tEnd,false);
//釋放內(nèi)存
document.removeEventListener('touchend',fnEnd,false);
document.removeEventListener('touchmove',fnMove,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
//阻止默認(rèn)事件
ev.preventDefault();
},false);
}
</script>
</head>
<body>
<div id="box">
<ul>
<li style="background:green">3</li>
<li style="background:orange">1</li>
<li style="background:yellow">2</li>
<li style="background:green">3</li>
<li style="background:orange">1</li>
</ul>
</div>
</body>
</html>
