纯JavaScript实现可拖拽滑块的自动轮播功能

// 获取DOM元素
var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('slides'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

let autoSlideInterval; // 用于存储 setInterval 的ID，以便清除

/**
 * 启动自动播放功能
 */
function startAutoPlay() {
    stopAutoPlay(); // 启动前先清除可能存在的旧定时器，避免重复启动
    autoSlideInterval = setInterval(() => {
        next.click(); // 模拟点击“下一张”按钮
    }, 3000); // 每3秒自动切换，可根据需求调整间隔时间
}

/**
 * 停止自动播放功能
 */
function stopAutoPlay() {
    clearInterval(autoSlideInterval); // 清除定时器，停止自动播放
}

// 在滑块初始化后立即启动自动播放
startAutoPlay();

/**
 * 滑块核心逻辑函数
 * @param {HTMLElement} wrapper 外部包裹元素
 * @param {HTMLElement} items 包含所有幻灯片的容器
 * @param {HTMLElement} prev “上一张”按钮
 * @param {HTMLElement} 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; // 标志位，防止快速重复切换

    // 克隆首尾幻灯片以实现无限循环效果
    items.appendChild(cloneFirst);
    items.insertBefore(cloneLast, firstSlide);
    wrapper.classList.add('loaded'); // 添加类名表示加载完成

    // 鼠标事件监听
    items.onmousedown = dragStart;

    // 触摸事件监听
    items.addEventListener('touchstart', dragStart);
    items.addEventListener('touchend', dragEnd);
    items.addEventListener('touchmove', dragAction);

    // 点击事件监听
    prev.addEventListener('click', function () {
        stopAutoPlay(); // 用户点击时停止自动播放
        shiftSlide(-1); // 切换到上一张
        startAutoPlay(); // 交互结束后恢复自动播放
    });
    next.addEventListener('click', function () {
        stopAutoPlay(); // 用户点击时停止自动播放
        shiftSlide(1);  // 切换到下一张
        startAutoPlay(); // 交互结束后恢复自动播放
    });

    // 鼠标悬停事件（可选，提升用户体验：鼠标悬停时暂停，移开时恢复）
    wrapper.addEventListener('mouseenter', stopAutoPlay);
    wrapper.addEventListener('mouseleave', startAutoPlay);

    // CSS过渡结束事件监听，用于处理无限循环的“瞬间跳转”
    items.addEventListener('transitionend', checkIndex);

    /**
     * 拖拽开始处理函数
     * @param {Event} e 事件对象
     */
    function dragStart (e) {
        e = e || window.event;
        e.preventDefault();
        posInitial = items.offsetLeft; // 记录初始位置

        if (e.type === 'touchstart') {
            posX1 = e.touches[0].clientX;