0

どうすればいいですか？背景画像を変更する次のコードがあります。

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

2 に答える 2

1

setInterval(...)このように変数を変更した後、再度呼び出す必要があります（切り捨てられました）

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

理想的には、冗長なコードを減らすために、この一部を名前付き関数に入れ、それを呼び出す必要があります

于 2013-01-25T14:37:18.973 に答える
0

これを試して：

$("#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);
  }
});

デモはこちら

于 2013-01-25T14:36:51.837 に答える