這個輪播代碼不是我自己所寫，是偶然游覽一個簡友的主頁看到的，今天剛看了事件，決定來逐行分析一下這個代碼。首先，移動端與電腦端不同的是移動端只能通過觸摸和手勢來發生行為，所以我們要用到js中的與觸摸操作有關的新事件。其實我們輪播的原理和以前相同，都是通過改變元素的位置來控制圖片的出現，但讓我們不是很上手的，是那些用于跟蹤觸摸的屬性。
下面，我簡單介紹一下與觸摸相關的知識
觸摸事件
touchstart：當手指觸摸屏幕時觸發，一只手指放在屏幕上也會觸發 touchmove：當手指在屏幕上滑動時連續觸發。在這個事件發生期間可以用preventDefault()可以阻止滾動。 touchend：手指從屏幕移開時觸發。 touchcancel：當系統停止跟蹤觸發時觸發。上面這幾個事件都會冒泡，也都可以取消。
屬性
touches:表示當前跟蹤的觸摸操作的Touch對象的數組 targetTouches:特定于事件目標的Touch對象的數組。（簡單點可以理解為手指觸摸屏幕的位置） changeTouches表示自上次觸摸以來發生了什么改變的touch對象的數組。（手指離開的位置）每個touch對象包括下列屬性
clientX:觸摸目標在視口中的x坐標 clientY:觸摸目標在視口中的y坐標 identifier:標識觸摸的唯一ID pageX:觸摸目標在頁面中的x坐標 pageY:觸摸目標在頁面中的y坐標 screenX:觸摸目標在頁面中的x坐標 screenY:觸摸目標在頁面中的y坐標 target:觸摸的dom節點目標代碼如下
<!DOCTYPE html><html><head> <title>移動端輪播</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;//這樣就可以把所有li標簽獲取到了 var iNow = 1; var x = -iNow*aLi[0].offsetWidth;//li標簽的位置 var bReady = true; oUl.addEventListener('touchstart',function(ev){ //當手指觸摸屏幕的時候觸發事件，讓li的位置隨手指滑動而改變 if(bReady == false){return;} bReady = false; var downX = ev.targetTouches[0].pageX; //記錄觸摸位置 var disX = downX - x;//下一個li要移動到的位置 function fnMove(ev) { x = downX-disX; oUl.style.transform = 'translate3d('+x+'px,0,0)'; } function fnEnd(ev){ var upX = ev.changedTouches[0].pageX;//離開的位置 if(Math.abs(upX - downX)>50){ //左邊移動 if(upX - downX<0){ iNow++; if(iNow==aLi.length){iNow=aLi.length-1;} }else{ //右邊移動 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); //釋放內存 document.removeEventListener('touchend',fnEnd,false); document.removeEventListener('touchmove',fnMove,false); } document.addEventListener('touchmove',fnMove,false); document.addEventListener('touchend',fnEnd,false); //阻止默認事件 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>
新聞熱點
疑難解答
圖片精選
