Question

以下是我想设置背景大小和位置的代码：

$(document).ready(function() {
    var header = $('body');

    //images
    var backgrounds = new Array(
        'url(image1)', 'url(image2)', 'url(image3)', 'url(image4)'
    );

    //animation
    var current = 0;

    function nextBackground() {
        current++;
        current = current % backgrounds.length;
        header.css('background-image', backgrounds[current]);
    }
    setInterval(nextBackground, 7000);

    header.css('background-image', backgrounds[0]);

});

我该怎么做？

Answer 1

如果你想要动画，那么你应该使用随机函数：

Math.random（）函数返回范围[0,1）中的浮点伪随机数，从0（包括）到最大但不包括1（不包括），然后您可以缩放到您想要的范围。该实现选择初始种子到随机数生成算法;它不能被用户选择或重置。

请注意，由于JavaScript中的数字是具有舍入到最近偶数行为的IEEE 754浮点数，因此下面函数声明的范围（不包括Math.random（）本身的范围）并不精确。如果选择了极大的界限（253或更高），则极少数情况下可以计算通常排除的上界。

// Returns a random number between min (inclusive) and max (exclusive)
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

你的代码应该是

$(document).ready(function() {
    var header = $('body');

    //images
    var backgrounds = new Array(
        'url(image1)', 'url(image2)', 'url(image3)', 'url(image4)'
    );

    //animation
    var current = 0;

    function nextBackground() {
        current++;
        //current = current % backgrounds.length;
        current = getRandomArbitrary(0,backgrounds.length;
        header.css('background-image', backgrounds[current]);
    }
    setInterval(nextBackground, 7000);

    header.css('background-image', backgrounds[0]);

});

并按照您的方法

$(document).ready(function() {
    var header = $('body');

    //images
    var backgrounds = new Array(
        'url(image1)', 'url(image2)', 'url(image3)', 'url(image4)'
    );

    //animation
    var current = 0;    

    function nextBackground() {
    if(current>=backgrounds.length)
    current = 0;              
        header.css('background-image', backgrounds[current]);
        current++;  
    }
    setInterval(nextBackground, 7000);

    header.css('background-image', backgrounds[0]);

});

我想在javascript上设置动画背景大小和位置

1 个答案: