用于使用自动幻灯片更改图像的 jQuery UI 滑块答案

【问题标题】：jQuery UI Slider for changing Image with auto slide用于使用自动幻灯片更改图像的 jQuery UI 滑块
【发布时间】：2014-04-04 10:46:44
【问题描述】：

我想构建一个 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 Example

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案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/

【讨论】：