欢迎光临一流素材网,免积分免费素材下载!
当前位置:首页 > 教程 > 网站开发

bootstrap轮播图实现手机端手指左右滑动滚动

所属栏目:网站开发更新时间:2021-03-12 来源:csdn 原作者:diligentkong 发布:deepdfhy浏览:0

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

bootstrap的carousel轮播图只支持点击左右按钮进行切换,在手机上不支持手指滑动来滚动,非常不方便。

其实是有办法实现的,增加如下JS代码即可:

<script>
    /**
     * Created by Administrator on 2017/7/11.
     */
    'use strict';
    $(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');
            }
        })
    });
</script>


收藏 0 有帮助 0 没帮助 0 打赏 0
给个评价吧
百度云加速250x250