为jquery插件添加自动幻灯片选项

Question

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

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秒执行一次。