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），它：

使用固定的方法重复调用函数或执行代码片段每次调用该函数之间的时间延迟。

在间隔的每个节拍中，按照您的想法调用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/

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

1 个答案: