bootstrap添加移动端添加滑动手势功能

最新推荐文章于 2021-01-11 21:27:50 发布

转载最新推荐文章于 2021-01-11 21:27:50 发布 · 1.3k 阅读

前端js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种实现轮播图触控滑动的方法，通过监听触摸开始、移动及结束事件来判断用户滑动方向并据此切换图片。具体实现了在移动端通过手指滑动进行轮播图的前后切换。

/**
 * Created by Administrator on 2017/12/12.
 */
$(function(){
    //轮播图
    // 获取手指在轮播图元素上的一个滑动方向（左右）
    // 获取界面上轮播图容器
    var $carousels = $('.carousel');
    var startX,endX;
    // 在滑动的一定范围内，才切换图片
    var offset = 50;
    // 注册滑动事件
    $carousels.on('touchstart',function (e) {
        // 手指触摸开始时记录一下手指所在的坐标x
        startX = e.originalEvent.touches[0].clientX;
    });
    $carousels.on('touchmove',function (e) {
        // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
        endX = e.originalEvent.touches[0].clientX;
    });
    $carousels.on('touchend',function (e) {
        //console.log(endX);
        //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
        //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
        var distance = Math.abs(startX - endX);
        if (distance > offset){
            //说明有方向的变化
            //根据获得的方向 判断是上一张还是下一张出现
            $(this).carousel(startX >endX ? 'next':'prev');
        }
    });
   
})