bootstrap轮播图在手机上实现手指划动切换图片

最新推荐文章于 2021-01-12 23:55:37 发布

EmilZs

最新推荐文章于 2021-01-12 23:55:37 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签：手指滑动切换图片 bootstrap轮播手机端

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种基于触屏事件实现的轮播图切换效果。通过监听touchstart、touchmove及touchend事件来判断用户的滑动方向，并据此切换轮播图中的图片。当滑动距离超过设定阈值时，轮播图会相应地切换到上一张或下一张。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$carousels = $("#effect");//effect是轮播图id
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');
    }
})