jQuery UI滑塊用於改變圖像與自動滑動

Question

我想構建一個用戶界面滑塊來更改圖像。到目前爲止，我已經設定圖像將每三秒鐘手動和自動更改。
我對代碼並不滿意，因爲當它達到最大值並從頭開始重複時，它會因爲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

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); 

那麼，有沒有需要檢查的更改回調:)

您還可以使用，而不是兩個的setTimeout

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

的setInterval值