如何为Momentum Slider jQuery滑块实现自动播放功能

实现原理 #

Momentum Slider 未内置自动播放能力，我们可以通过定时器调用滑块实例的select()切换方法实现轮播，同时补充鼠标交互逻辑优化体验。

具体实现步骤 #

1. 新增定时器变量与轮播间隔配置，用于控制自动播放的启停和切换速度
2. 封装自动播放函数，逻辑为：获取当前滑块索引，计算下一个索引值，到达最后一张时自动回到第一张，调用主滑块的select()方法触发切换
3. 给滑块容器添加鼠标事件监听：鼠标移入时清除定时器暂停轮播，鼠标移出时重启定时器恢复轮播
4. 页面初始化完成后启动自动播放定时器

修改后的完整代码 #

(function() {
    var slidersContainer = document.querySelector('.sliders-container');
    // 新增自动播放配置
    var autoplayTimer = null;
    var autoplayInterval = 3000; // 单位毫秒，可自行调整切换间隔

    // 初始化数字滑块
    var msNumbers = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--numbers',
        range: [1, 4],
        rangeContent: function (i) {
            return '0' + i;
        },
        style: {
            transform: [{scale: [0.4, 1]}],
            opacity: [0, 1]
        },
        interactive: false
    });

    // 初始化标题滑块
    var titles = [
        'King of the Ring Fight',
        'Sound of Streets',
        'Urban Fashion',
        'Windy Sunset'
    ];
    var msTitles = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--titles',
        range: [0, 3],
        rangeContent: function (i) {
            return '<h3>'+ titles[i] +'</h3>';
        },
        vertical: true,
        reverse: true,
        style: {
            opacity: [0, 1]
        },
        interactive: false
    });

    // 初始化链接滑块
    var msLinks = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--links',
        range: [0, 3],
        rangeContent: function () {
            return '<a class="ms-slide__link">View Case</a>';
        },
        vertical: true,
        interactive: false
    });

    // 获取分页元素
    var pagination = document.querySelector('.pagination');
    var paginationItems = [].slice.call(pagination.children);

    // 初始化图片滑块
    var msImages = new MomentumSlider({
        el: slidersContainer,
        cssClass: 'ms--images',
        range: [0, 3],
        rangeContent: function () {
            return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
        },
        sync: [msNumbers, msTitles, msLinks],
        style: {
            '.ms-slide__image': {
                transform: [{scale: [1.5, 1]}]
            }
        },
        change: function(newIndex, oldIndex) {
            if (typeof oldIndex !== 'undefined') {
                paginationItems[oldIndex].classList.remove('pagination__item--active');
            }
            paginationItems[newIndex].classList.add('pagination__item--active');
        }
    });

    // 自动播放函数
    function startAutoplay() {
        autoplayTimer = setInterval(function() {
            var currentIndex = msImages.index;
            var nextIndex = currentIndex + 1;
            // 总滑块共4个，索引范围0-3，到达末尾自动回到起始位
            if (nextIndex > 3) {
                nextIndex = 0;
            }
            msImages.select(nextIndex);
        }, autoplayInterval);
    }

    // 暂停自动播放函数
    function stopAutoplay() {
        if (autoplayTimer) {
            clearInterval(autoplayTimer);
            autoplayTimer = null;
        }
    }

    // 鼠标交互逻辑：悬停暂停，离开恢复
    slidersContainer.addEventListener('mouseenter', stopAutoplay);
    slidersContainer.addEventListener('mouseleave', startAutoplay);

    // 分页点击切换逻辑
    pagination.addEventListener('click', function(e) {
        if (e.target.matches('.pagination__button')) {
            var index = paginationItems.indexOf(e.target.parentNode);
            msImages.select(index);
        }
    });

    // 初始化启动自动播放
    startAutoplay();
})();

参数调整说明 #

• 修改autoplayInterval的数值即可调整自动切换的间隔时间，单位为毫秒，例如设置为5000就是每5秒切换一次
• 如果不需要鼠标悬停暂停的逻辑，删除对应的mouseenter和mouseleave事件监听代码即可

内容的提问来源于stack exchange，提问作者Brave Warrior