手机端导航栏滚动案例

window.addEventListener(‘load’, function() {
var ul = this.document.querySelector(’.b-imgs’) //轮播图图片的父元素ul
var box = this.document.querySelector(’.slider’) //装轮播图的大盒子
var ol = this.document.querySelector(’.circle’) //轮播图小圆点
var num = 0
var timer = this.setInterval(function() {
num++;
var value = -box.offsetWidth * num
// console.log(value);
ul.style.transition = ‘all .3s’;
ul.style.transform = “translateX(” + value + “px)”
}, 2000)

// 监听过度完成的事件transitionend
ul.addEventListener('transitionend', function() {
    if (num >= 3) {
        num = 0
        this.style.transition = 'none';
        this.style.transform = 'translateX(0px)'
    } else if (num < 0) {
        num = 2;
        var value = -box.offsetWidth * num
        this.style.transition = 'none';
        this.style.transform = 'translateX(' + value + ')'
    }

    // 小圆点跟随变化
    var li = ol.querySelector('li.current');
    li.classList.remove('current');
    ol.children[num].classList.add('current')
})

// 手指滑动图片
var start_x = 0;
var move_x = 0
var flag = false;
ul.addEventListener('touchstart', function(e) {
    clearInterval(timer)
    start_x = e.targetTouches[0].pageX;
    console.log(start_x);
    flag = false;
})
ul.addEventListener('touchmove', function(e) {
    e.preventDefault(); //阻止滚动屏幕的行为
    move_x = e.targetTouches[0].pageX - start_x;
    var value = -box.offsetWidth * num + move_x;

    this.style.transition = 'none';
    this.style.transform = 'translatex(' + value + 'px)'
    flag = true;
})
ul.addEventListener('touchend', function(e) {
    if (flag) {
        if (move_x < -50) {
            num++;
        } else if (move_x >= 50) {
            num--;
        }
        var value = -box.offsetWidth * num
        this.style.transition = 'all .3s';
        this.style.transform = "translateX(" + value + "px)"
    }
    clearInterval(timer)
    timer = setInterval(function() {
        num++;
        var value = -box.offsetWidth * num
            // console.log(value);
        ul.style.transition = 'all .3s';
        ul.style.transform = "translateX(" + value + "px)"
    }, 2000)
})

})