Question

我该怎么做？我有以下代码更改背景图像：

var alt = false;
    var delay = 5000;
    var speed = ((delay / 3)*2);
    var opacity = 1;


    $( "#slider" ).slider({
        orientation: "vertical", 
        range: "true", 
        min: 500, 
        max: 10000, 
        value: delay,
        change: function( event, ui ) {
            delay = ui.value;
        }
    });

    setInterval(function() {
    var r=Math.floor(Math.random()*b.length);
    console.log(delay);
    switch(alt)
    {   case true:
            $('#bg1').css("background-image", "url('"+b[r]+"')");
            $('#bg1').fadeTo(speed,opacity);
            $('#bg2').fadeOut(speed);
        break;
        case false:
            $('#bg2').css("background-image", "url('"+b[r]+"')");
            $('#bg2').fadeTo(speed,opacity);
            $('#bg1').fadeOut(speed);
        break;
    }
    alt = !alt;
    }, delay);

更改滑块应更改变量但不更改。我不知道如何更改名为delay的变量。

修改现在我正在尝试这个，但它也没有工作，当我移动滑块时它会改变一次：

var alt = false;
            var delay = 1000;
            var speed = ((delay / 3)*2);
            var opacity = 1;
            var h;


            function iSwap() {
                var r=Math.floor(Math.random()*b.length);
                console.log(delay);
                switch(alt)
                {   case true:
                        $('#bg1').css("background-image", "url('"+b[r]+"')");
                        $('#bg1').fadeTo(speed,opacity);
                        $('#bg2').fadeOut(speed);
                    break;
                    case false:
                        $('#bg2').css("background-image", "url('"+b[r]+"')");
                        $('#bg2').fadeTo(speed,opacity);
                        $('#bg1').fadeOut(speed);
                    break;
                }
                alt = !alt;
            }

            h = setInterval(iSwap(), delay);
            $( "#slider" ).slider({
                orientation: "vertical", 
                range: "true", 
                min: 500, 
                max: 10000, 
                value: delay,
                change: function( event, ui ) {
                    delay = ui.value;
                    clearInterval(h);
                    h = setInterval(iSwap(), delay);
                }
            });

Answer 1

更改变量后，您必须再次调用setInterval(...)，如此（截断）

var handle;
/* -- snip -- */
change: function( event, ui ) {
   delay = ui.value;
   clearInterval(handle);
   handle = setInterval( /* -- snip -- */ , delay);
}
/* -- snip -- */
handle = setInterval( /* -- snip -- */ , delay)

理想情况下，为了减少冗余代码，您必须将其中的一部分放在命名函数中并调用

Answer 2

试试这个：

$("#slider").slider({
  orientation: "vertical",
  range: "true",
  min: 500,
  max: 10000,
  value: delay,
  slide: function (event, ui) {
    $("#amount").val(ui.value);
    delay = ui.value
    console.log(delay);
  }
});

A DEMO HERE

使用jQuery UI Slider更改setInterval（）的值

2 个答案: