SliderJS - 幻灯片的自动播放功能

Question

我正在尝试将 Nick Jonas 的出色 SliderJS 应用到一个网站。 (https://github.com/nick-jonas/SliderJS)

一切正常，但我希望图像能够自动滑动。 但现在我无法使用自动播放功能。

有一个名为 NextImage() 的方法——我认为这正是需要实现的，但我不知道它是如何工作的。

这是我的代码。

$(document).ready(function() {

// SLIDER
$sl = $('#slider').slider({
    'media': [
        'images/1.jpg',
        'images/2.jpg',
        'images/3.jpg',
        'images/4.jpg',
        'images/5.jpg',
    ],
    'startIndex': 0,
    'easing': 'easeOutExpo',
    'draggable': false,
    'sizeConstraint': "cover",
    'animationSpeed': 600,
    'preloaderPath': "images/loading.gif",
    'minWidth': 200,
    'minHeight': 400,
});

});

感谢所有可以帮助我的人:)

Answer 1

你可以使用 seInterval (https://developer.mozilla.org/en-US/docs/DOM/window.setInterval)，它：

重复调用一个函数或执行一段代码sn-p，有固定的 每次调用该函数之间的时间延迟。

并且在间隔的每个滴答声中，如您所想，调用nextImage()。

您的代码将如下所示：

var $sl;
// SLIDER
$(document).ready(function () {
    $sl = $('#slider').slider({
        'media': [
            'http://cms.taradonne.com/uploads/food-541.jpg',
            'http://cms.taradonne.com/uploads/stills-26.jpg'],
            'startIndex': 0,
            'easing': 'easeOutExpo',
            'draggable': false,
            'sizeConstraint': "cover",
            'animationSpeed': 600,
            'minWidth': 200,
            'minHeight': 400,
    });

    window.setInterval(function () {
        changeImages()
    }, 2000);

});

function changeImages() {
    $sl.nextImage();
}

这是一个有效的小提琴：http://jsfiddle.net/IrvinDominin/PMRwK/1/