如何将可拖拽滑动Slider改造为自动轮播Carousel？

现有已实现拖拽滑动的无限Slider组件，需快速改造为支持自动轮播的Carousel，保留原有拖拽、点击切换功能，同时实现定时自动切换，并在用户交互时暂停轮播。

实现步骤 #

• 在slide函数内部新增定时器变量，用于控制轮播触发
• 编写startAutoSlide函数，通过setInterval定时调用shiftSlide(1)实现自动向右切换
• 在用户触发拖拽开始、点击切换按钮、鼠标悬停Slider时，清除定时器暂停轮播
• 在拖拽结束、切换动画完成、鼠标离开Slider时，重新启动轮播
• 可通过调整autoSlideInterval变量修改轮播间隔（默认3000毫秒）

修改后的完整代码 #

JavaScript #

var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('slides'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

function slide(wrapper, items, prev, next) {
    var posX1 = 0,
        posX2 = 0,
        posInitial,
        posFinal,
        threshold = 100,
        slides = items.getElementsByClassName('slide'),
        slidesLength = slides.length,
        slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
        firstSlide = slides[0],
        lastSlide = slides[slidesLength - 1],
        cloneFirst = firstSlide.cloneNode(true),
        cloneLast = lastSlide.cloneNode(true),
        index = 0,
        allowShift = true,
        autoSlideInterval = 3000, // 轮播间隔，单位毫秒
        autoSlideTimer; // 定时器变量

    // 克隆首尾幻灯片
    items.appendChild(cloneFirst);
    items.insertBefore(cloneLast, firstSlide);
    wrapper.classList.add('loaded');

    // 启动自动轮播
    function startAutoSlide() {
        autoSlideTimer = setInterval(() => {
            shiftSlide(1);
        }, autoSlideInterval);
    }

    // 暂停自动轮播
    function stopAutoSlide() {
        clearInterval(autoSlideTimer);
    }

    // 鼠标悬停暂停，离开恢复
    wrapper.addEventListener('mouseenter', stopAutoSlide);
    wrapper.addEventListener('mouseleave', startAutoSlide);

    // 鼠标事件
    items.onmousedown = function(e) {
        stopAutoSlide();
        dragStart(e);
    };

    // 触摸事件
    items.addEventListener('touchstart', function(e) {
        stopAutoSlide();
        dragStart(e);
    });
    items.addEventListener('touchend', function(e) {
        dragEnd(e);
        startAutoSlide();
    });
    items.addEventListener('touchmove', dragAction);

    // 点击事件
    prev.addEventListener('click', function () { 
        stopAutoSlide();
        shiftSlide(-1);
    });
    next.addEventListener('click', function () { 
        stopAutoSlide();
        shiftSlide(1);
    });

    // 过渡结束事件，恢复轮播
    items.addEventListener('transitionend', function() {
        checkIndex();
        startAutoSlide();
    });

    function dragStart (e) {
        e = e || window.event;
        e.preventDefault();
        posInitial = items.offsetLeft;

        if (e.type == 'touchstart') {
            posX1 = e.touches[0].clientX;
        } else {
            posX1 = e.clientX;
            document.onmouseup = dragEnd;
            document.onmousemove = dragAction;
        }
    }

    function dragAction (e) {
        e = e || window.event;

        if (e.type == 'touchmove') {
            posX2 = posX1 - e.touches[0].clientX;
            posX1 = e.touches[0].clientX;
        } else {
            posX2 = posX1 - e.clientX;
            posX1 = e.clientX;
        }

        items.style.left = (items.offsetLeft - posX2) + "px";
    }

    function dragEnd (e) {
        posFinal = items.offsetLeft;

        if (posFinal - posInitial < -threshold) {
            shiftSlide(1, 'drag');
        } else if (posFinal - posInitial > threshold) {
            shiftSlide(-1, 'drag');
        } else {
            items.style.left = (posInitial) + "px";
        }

        document.onmouseup = null;
        document.onmousemove = null;
    }

    function shiftSlide(dir, action) {
        items.classList.add('shifting');

        if (allowShift) {
            if (!action) { posInitial = items.offsetLeft; }
            if (dir == 1) {
                items.style.left = (posInitial - slideSize) + "px";
                index++;
            } else if (dir == -1) {
                items.style.left = (posInitial + slideSize) + "px";
                index--;
            }
        };

        allowShift = false;
    }

    function checkIndex (){
        items.classList.remove('shifting');
        if (index == -1) {
            items.style.left = -(slidesLength * slideSize) + "px";
            index = slidesLength - 1;
        }

        if (index == slidesLength) {
            items.style.left = -(1 * slideSize) + "px";
            index = 0;
        }

        allowShift = true;
    }

    // 初始化启动轮播
    startAutoSlide();
}

slide(slider, sliderItems, prev, next);

CSS #

@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
    box-sizing: border-box;
}
body {
    height: 100%;
    background-color: #3f3f3f;
    color: #333;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    letter-spacing: 0.15em;
    font-size: 22px;
}
.slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.wrapper {
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 200px;
    z-index: 1;
}
.slides {
    display: flex;
    position: relative;
    top: 0;
    left: -300px;
    width: 10000px;
}
.slides.shifting {
    transition: left 0.2s ease-out;
}
.slide {
    width: 300px;
    height: 200px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s;
    position: relative;
    background: #FFCF47;
    border-radius: 2px;
}
.slider.loaded .slide:nth-child(2), .slider.loaded .slide:nth-child(7) {
    background: #FFCF47;
}
.slider.loaded .slide:nth-child(1), .slider.loaded .slide:nth-child(6) {
    background: #7ADCEF;
}
.slider.loaded .slide:nth-child(3) {
    background: #3CFF96;
}
.slider.loaded .slide:nth-child(4) {
    background: #a78df5;
}
.slider.loaded .slide:nth-child(5) {
    background: #ff8686;
}
.control {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50px;
    margin-top: -20px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
    z-index: 2;
}
.prev, .next {
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.prev {
    background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
    left: -20px;
}
.next {
    background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
    right: -20px;
}
.prev:active, .next:active {
    transform: scale(0.8);
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS | Plain javascript draggable infinite slider with auto-play</title>
</head>
<body>
    <div id="slider" class="slider">
        <div class="wrapper">
            <div id="slides" class="slides">
                <span class="slide">Slide 1</span>
                <span class="slide">Slide 2</span>
                <span class="slide">Slide 3</span>
                <span class="slide">Slide 4</span>
                <span class="slide">Slide 5</span>
            </div>
        </div>
        <a id="prev" class="control prev"></a>
        <a id="next" class="control next"></a>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Matt Don