jquery - 为 jquery 插件添加自动滑动选项

Question

我打算在网站中使用此滑块，但它没有自动播放选项。它只是在鼠标单击事件上滑动。

jquery如下：

(function($){

    $('.square-slider').each(function(){
        var slider = $(this),
            slides = slider.find('.slide'),
            currentSlide = 0;

        slides.show();
        $(slides[currentSlide]).addClass('active');
        $('.next,.prev', slider).show();

        $('.prev', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide--;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            $(slides[currentSlide]).addClass('active');
            return false;
        });

        $('.next', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide++;
            if(currentSlide > slides.length - 1) currentSlide = 0;
            $(slides[currentSlide]).addClass('active');
            return false;
        });
    });

})(window.jQuery);

我应该添加什么以使其能够从一个图像自动滑动到另一个图像。

Answer 1

您可以做的是定期触发下一个按钮单击事件。

例子

setInterval(function(){
  $('.next').trigger('click');
},2000);

DEMO

Answer 2

将这些代码包装在如下函数中：

function next() {

slides.removeClass('active');
currentSlide++;
if(currentSlide > slides.length - 1) currentSlide = 0;
$(slides[currentSlide]).addClass('active');

}

然后你可以使用 javascript 的setInterval()功能，如：

setInterval( next(), 5000);

这样，next() 函数将每 5 秒执行一次。