js轮播图 携程

Posted 2021-07-24 cuter、

window.addEventListener('load', function() {
    //获取元素
    var foucss = document.querySelector('.banner');
    var imgbox = foucss.children[0];
    var foucsol = document.querySelector('.focusol')
        //获取banner宽度
    var w = foucss.offsetWidth;
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translateX = -index * w;
        imgbox.style.transition = 'all .3s';
        imgbox.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
    //等过渡完后，再去判断  监听过渡事件
    imgbox.addEventListener('transitionend', function() {
        //无缝滚动开始
        if (index >= 3) {
            index = 0;
            imgbox.style.transition = 'none';
            var translateX = -index * w;
            imgbox.style.transform = 'translateX(' + translateX + 'px)';
        } else if (index < 0) {
            index = 2;
            imgbox.style.transition = 'none';
            var translateX = -index * w;
            imgbox.style.transform = 'translateX(' + translateX + 'px)';
        }
        //小圆点变化
        foucsol.querySelector('.current').classList.remove('current');
        foucsol.children[index].classList.add('current');

    });
    //手指滑动轮播图
    //触摸元素 touchstart：获取初始坐标
    var stratX = 0;
    var flag = false;
    imgbox.addEventListener('touchstart', function(e) {
        stratX = e.targetTouches[0].pageX;
        //当我手指一触屏 停止定时器
        clearInterval(timer);
    });
    var moveX = 0; //后面要使用这个移动距离 所以要定义一个全局变量
    imgbox.addEventListener('touchmove', function(e) {
        //计算移动距离
        moveX = e.targetTouches[0].pageX - stratX;
        //移动盒子:盒子原来位置+手指移动距离
        var translateX = -index * w + moveX;
        //手指拖动不需要动画效果 所以要取消过渡效果
        imgbox.style.transition = 'none';
        imgbox.style.transform = 'translateX(' + translateX + 'px)';
        flag = true;
        e.preventDefault(); //阻止滚动屏幕的行为




    });
    imgbox.addEventListener('touchend', function(e) {
        //如果移动距离大于50px就播放下一张或者上一张
        if (flag) {
            if (Math.abs(moveX) > 50) {
                //如果是右滑 那就是播放上一张  moveX是正值
                //如果是左滑 那就是播放下一张  moveX是负值
                if (moveX > 0) {
                    index--;

                } else {
                    index++;

                }
                imgbox.style.transition = 'all .3s';
                var translateX = -index * w;
                imgbox.style.transform = 'translateX(' + translateX + 'px)';
            } else {
                //如果小于50，就回弹
                imgbox.style.transition = 'all .3s';
                var translateX = -index * w;
                imgbox.style.transform = 'translateX(' + translateX + 'px)';
            }
        }
        clearInterval(timer);
        var timer = setInterval(function() {
            index++;
            var translateX = -index * w;
            imgbox.style.transition = 'all .3s';
            imgbox.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);


    });




})

压缩包地址: link.