既然是滑動(dòng)的話肯定是touch事件,需要獲取觸摸屏幕開始的X值，和結(jié)束的值,怎樣才算結(jié)束的值？就是在屏幕中移動(dòng)的值并將手抬起的X值，然后通過(guò)touchend介紹事件進(jìn)行判斷操作

//1.先獲取手指在輪播圖上的滑動(dòng)方向//手指觸摸開始時(shí)記錄一下手指所在的坐標(biāo)X//結(jié)束觸摸一瞬間記錄最后的手指所在坐標(biāo)X//獲取界面上的輪播圖容器var $carousels = $('.carousel');var startX;var endX;var offset = 50;//注冊(cè)滑動(dòng)事件 touchstart當(dāng)手指觸摸屏幕時(shí)候觸發(fā)$carousels.on('touchstart',function(e){startX = e.originalEvent.touches[0].clientX;console.log(startX);});$carousels.on('touchmove',function(e){//用手指觸摸屏幕的時(shí)候重復(fù)給變量賦值來(lái)達(dá)到獲取離開之前最后一次x的位置endX = e.originalEvent.touches[0].clientX;});$carousels.on('touchend',function(e){console.log(endX);//控制精度//獲取每次運(yùn)動(dòng)的距離，當(dāng)距離大于一定值時(shí)，我們就認(rèn)為是有方向的變化,不然2個(gè)值相差0.1他也是認(rèn)為變化var distance = Math.abs(startX - endX);if(distance >offset){//有方向變化//2.根據(jù)獲得到的方向選擇上一張或者下一張//原生的carousel方法實(shí)現(xiàn)$(this).carousel(startX > endX ? 'next':'prev')}});

總結(jié)

以上是生活随笔為你收集整理的如何实现移动端轮播图的左滑右滑效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。