translateX实现移动端轮播图效果

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

1.获取元素

获取轮播图片的父元素ul的宽度 定时器轮播图片

    var index = 0;
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all, .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 1000)

2.监听过渡完成的事件 transitionend

无缝滚动图片去掉过渡效果,ul快速的调到目标位置

    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0;
            //图片去掉过渡效果,ul快速的调到目标位置
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
    })

3.小圆点跟随轮播图一起变化的效果

把ol里面li带有current类名的选出来,去掉类名 remove

让当前索引号的li加上current

        ol.querySelector('.current').classList.remove('current');
       
        ol.children[index].classList.add('current');

4.手指滑动轮播图

手指触摸的时候停止定时器

   ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    })

5.移动手指 touchmove: 计算手指的滑动距离,并且移动盒子

移动盒子: 盒子原来的位置 + 手指移动的距离

手指拖动的时候不需要过渡效果

如果用户手指移动过,我们再做判断,否则不判断效果

阻止滚动屏幕的行为

   ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - startX;
        var translatex = -index * w + moveX;
        ul.style.transform = 'translateX(' + translatex + 'px)';
        ul.style.transition = 'none';
        flag = true;
        e.preventDefault(); 
    })

6.判断用户行为滑动图片的距离,决定图片是否做动画

 if (Math.abs(moveX) > 50) {
                //右滑 正值 moveX>0 左滑 负值
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all, .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                //如果移动距离小于50px 我们就回弹
                var translatex = -index * w;
                ul.style.transition = 'all, .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }

7.手指离开重新开启定时器

开启定时器之前需要先清空之前声明的定时器,

这样可以保证页面时刻只有一个定时器在运行,

不会消耗内存,动画a结束之后也一定要清空定时器

   clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all, .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 1000)