jQuery UI Slider用於通過自動滑動更改圖像

Question

我想構建一個UI滑塊來更改圖像。 到目前為止，我已經設法使圖像每三秒鍾手動和自動更改一次。
我對代碼不是很滿意，因為當它達到最大值並從頭開始重復時，由於setInterval，它將跳過最后一個值。 有沒有更簡單，更漂亮的方法來解決這個問題？

的HTML

<div id="wrapper">
    <div class="image">
        <img id="image" src="http://fakeimg.pl/350x200/?text=0&font=lobster" />
    </div>
    <div id="slider"></div>
</div>

腳本

$(function () {
    $('#slider').slider({
        value: 0,
        min: 0,
        max: 5,
        step: 1,
        change: function (event, ui) {
            var slideruivalue = (ui.value);
            image = $('#image');
            image.attr('src', 'http://fakeimg.pl/350x200/?text=' + slideruivalue);

            if (slideruivalue == $(this).data("slider").options.max) {
                $('#slider').slider('value', 0);
            }
        }
    });

    $(function AutoSlider() {
        setTimeout(function () {
            $("#slider").slider("value", $('#slider').slider("value") + 1);
        }, 3000);
        setTimeout(AutoSlider, 3000);
    });
});

jsFiddle示例

Answer 1

在setTimeout中，獲取滑塊的最大值，然后使用max + 1上的模數（運算符％）計算新值：

    setInterval(function () {
        var value = $('#slider').slider("value");
        var max = $('#slider').slider( "option", "max" );
        $("#slider").slider("value", (value + 1)% (max+1));
    }, 3000);

然后，無需檢查更改回調中的值：）

您也可以使用setInterval而不是兩個setTimeout

http://jsfiddle.net/q5R68/1/