1當(dāng)開始一個(gè)touchstart事件的時(shí)候，獲取此刻手指的橫坐標(biāo)startX和縱坐標(biāo)startY2當(dāng)觸發(fā)touchmove事件時(shí)，在獲取此時(shí)手指的橫坐標(biāo)moveEndX和縱坐標(biāo)moveEndY最后，通過這兩次獲取的坐標(biāo)差值來判斷手指在手機(jī)屏幕上的滑動(dòng)方向；2項(xiàng)目中只需要把css和js引入即可3然后通過代碼循環(huán)加載swiperslide結(jié)構(gòu)的，因?yàn)槟壳俺绦蛑兄挥?張圖片，所以下面單獨(dú)加了兩張4設(shè)置45視圖模式，JS直接給賦值成45即可，new Swiper#39#home2#39，slidesPerView；代碼解析width 2是寬度二分之一處也就是屏幕寬度的中間位置height 500是高度減500像素，屏幕頂部為00是屏幕頂端500是手指從起點(diǎn)移動(dòng)到終點(diǎn)所需時(shí)間，單位是毫秒這樣講，應(yīng)該很明白了如果需要下滑，那么。

你可以使用JSjQuery來修改這些屬性，也可以使用onchange事件來監(jiān)聽變化代碼如下Current value 0 或者 functionvar currentValue = $#39#currentValue#39$#39#defaultSlider#39changefunction；我自己寫的BS輪播加手勢滑動(dòng)，引入了一個(gè)插件，直接看代碼吧引入插件JS代碼$documentreadyfunction手勢右滑 回到上一個(gè)畫面$#39#myCarousel#39bind#39swiperight swiperightup swiperightdown#39，function；即 N+2張圖來實(shí)現(xiàn)N張圖的無限循環(huán)輪播 我們通過分析現(xiàn)象，可以提出一個(gè)基本實(shí)現(xiàn)方案 1 手指觸摸事件可以通過 touchstart touchmove touchend 3個(gè)事件來實(shí)現(xiàn) 2在手指 touchstart的時(shí)候我們需要記錄 手指的x坐標(biāo)。

html5 新增 touch 事件禁用手機(jī)默認(rèn)的觸屏滾動(dòng)行為documentaddEventListener#39touchmove#39， functionevent eventpreventDefault， falsetouchstart事件function touchSatrtFuncevt try；JavaScript 代碼scriptjsdocumentaddEventListener#39DOMContentLoaded#39， function var slider = documentgetElementById#39slider#39var sliderWrapper = sliderparentElementvar startX， currentXslider；這里有個(gè)DEMO，需要JQUERY lt！DOCTYPE HTML ltHTML ltHEAD container width400pxheight400pxbackgroundcolor#corsorpointer seat floatleftwidth40pxheight40pxbackgroundcolorgreen；移動(dòng)端觸屏滑動(dòng)的效果其實(shí)就是圖片輪播，在PC的頁面上很好實(shí)現(xiàn)，綁定click和mouseover等事件來完成但是在移動(dòng)設(shè)備上，要實(shí)現(xiàn)這種輪播的效果，就需要用到核心的touch事件處理touch事件能跟蹤到屏幕滑動(dòng)的每根手指以下是四種。

javascript HTML 滑鼠放上button時(shí)，顯示成小手的形狀 全域性的直接寫css樣式適用于ie6 button star expressiononmouseover==#39hand#39 如果是高于ie6版本的話 用javascript來做 wind；js判斷手指滑動(dòng)方向移動(dòng)端var startx， starty獲得角度 function getAngleangx， angy return Mathatan2angy， angx * 180 MathPI根據(jù)起點(diǎn)終點(diǎn)返回方向 1向上 2向下 3向左 4向右 0未滑動(dòng) f；監(jiān)聽觸摸事件eventtouches中觸摸點(diǎn)的數(shù)量 在touchmove事件做判定，如果 ==2 則記錄此次兩點(diǎn)之間的距離MathsqrtMathpo2x1，2+Mathpowy2y1，2在手指移動(dòng)過程中針對每一次的兩點(diǎn)。

jquery 移動(dòng)端手指拖拽div四個(gè)邊框，可上下左右隨意拉伸調(diào)節(jié)div大小 5 new；這里放手機(jī)在屏幕上劃動(dòng)的代碼，可以隨時(shí)取得手指的坐標(biāo)，并對元素做相應(yīng)的調(diào)整，false以上的手機(jī)觸屏事件分別對應(yīng)著PC網(wǎng)頁端的 onmousedown事件onmouseup事件和onmousemove事年，注意以上的手機(jī)端的JS事件在網(wǎng)頁端是。