PC端移动端无缝滚动轮播图

发表于 | 分类于
| 字数： 370 | 时长： 1 min

代码已上传github

PC端移动端都实现无缝滚动轮播图
还支持左右滑动切换
下面我将演示下在手机端的左右滑动的代码
1.获取手指按下时在轮播图元素的什么位置记录下来
2.当手机离开屏幕是获取最后为位置记录下来
3.根据按下和离开是的位置左边获得到的手指滑动的方向(滑动距离须大于50)选择上一张或者下一张

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//1.先获取手指在轮播图元素上  一个滑动方向(左右)
        //手指触摸开始记录手指所在坐标X
        // 比大小
        var startX, endX;
        //注册滑动事件
        $(".imgBox").on('touchstart', function (e) {
            //手指开始时记录手指所在坐标
            startX = e.originalEvent.touches[0].clientX;
            clearInterval(timerId);
        });

        $(".imgBox").on("touchend", function (e) {
            //手指结束时记录手指所在坐标
            endX = e.originalEvent.changedTouches[0].clientX;

            //控制精度
            //获取每次运动的距离,当距离大于一定值时认为是有方向的
            var distance = Math.abs(startX - endX);

            if( distance > 50) {
                //2.根据获得到的方向选择上一张或者下一张
                startX < endX ? prev() : next()
            }
            timerId = setInterval(function () {
                next()
            }, 3000);
        })

总结

这个轮播图花费了我不少的时间因为需要处理的事件实在太多,但是做出来后感觉非常满足😌的哈哈