我想设置动画背景的大小和位置上的JavaScript

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

});