Javascript 动态随机横幅

我试图用未知（但很少）数量的图像制作一个随机预装的横幅

我是Javascript和jQuery的新手，但我几乎可以很好地使用它：

我想是因为时机不对，所以出了问题。 我在javascript代码上拆分了第一条横幅，因为我希望它能够毫不延迟地显示出来

有什么线索吗

非常感谢

代码（如上所示）：

CSS

JS+JQUERY

$(window).load(function() {

var numItems = $('.banner-gov').length;
var i = 2;
var espera = 3000;

function bannerrand() {
    $('#banner-gov-1').fadeIn('medium', function() {
        $(this).delay(espera).fadeOut('medium');
    })

    while (i <= numItems) {
        var esperaItem = espera*i;
        $('#banner-gov-'+i).delay(esperaItem).fadeIn('medium', function() {
            $(this).delay(espera).fadeOut('medium', function(){
                if(i = numItems){
                    bannerrand();
                };
            });
        });

        i++;
    }
}
bannerrand();

}); //end $(window).load(function

$（窗口）.load（函数（）{
var numItems=$（'.banner gov'）.length；
var i=2；
var espera=3000；
函数bannerrand（）{
$（'#banner-gov-1'）.fadeIn（'medium'，function（）{
$（此）.delay（espera）.fadeOut（'medium'）；
})
而（i检查一下。

其思想是使用
mod
操作符循环图像，并使用
fadeOut
的回调函数无限期地调用动画函数

var numItems = $('.banner-gov').length;
var i = 2;
var espera = 3000;

function bannerrand() {


        //var esperaItem = espera*i;
        $('#banner-gov-'+(i% numItems + 1)).delay(espera).fadeIn('medium', function() {
            $(this).delay(espera).fadeOut('medium', function(){

                    bannerrand();

            });
        });

        i++;

}

    $('#banner-gov-1').fadeIn('medium', function() {
        $(this).delay(espera).fadeOut('medium', function(){

                    bannerrand();

            });

    })

这段代码运行得很好，非常感谢！：）我认为横幅之间没有延迟会更好，所以我做了另一次修改，它变得完美（删除了fadein上的延迟）我只是不明白你对mod运算符和这段代码的意思：+（I%numItems+1）！@LuAmbros Yes更改延迟以满足您的需要。mod操作符
%
在
i
除以
numItems
后重新计算余数。因此它总是返回一个介于
0
和
numItems-1
@LuAmbros之间的数字，因为现在的显示顺序不是随机的，而是按顺序的。您可以使用
Math、 random（）
来随机显示。将
i
替换为类似
Math.floor（（Math.random（）*100））
就可以了。感谢您的提示和帮助！现在随机来自wordpress对我案例的查询，代码为“'orderby'=>'rand'”）
<div id="banner-governo">
<div class="banner-gov" id="banner-gov-1">
    <img src="http://www.hospedagemdesitesgratis.org/img/hospedagem-gratis-html.jpg" />
</div>
<div class="banner-gov" id="banner-gov-2">
    <img src="http://apostilaria.com/wp-content/uploads/2011/02/javascript.jpg" />
</div>
<div class="banner-gov" id="banner-gov-3">
    <img src="http://otaqui.com/blog/wp-content/uploads/html5_vs_flash-300x100.png" />
</div>
</div>​

var numItems = $('.banner-gov').length;
var i = 2;
var espera = 3000;

function bannerrand() {


        //var esperaItem = espera*i;
        $('#banner-gov-'+(i% numItems + 1)).delay(espera).fadeIn('medium', function() {
            $(this).delay(espera).fadeOut('medium', function(){

                    bannerrand();

            });
        });

        i++;

}

    $('#banner-gov-1').fadeIn('medium', function() {
        $(this).delay(espera).fadeOut('medium', function(){

                    bannerrand();

            });

    })