Question

我正在尝试使用未知（但数量很少）的图像制作随机预装横幅。

我是Javascript和jQuery的新手，但我几乎让它运行良好： http://jsfiddle.net/kTS3t/1/

我认为有些不对劲因为时机不合适。我在javascript代码上拆分了第一个横幅，因为我希望它能够毫不拖延地显示出来。

有什么线索错了吗？

非常感谢！

CSS

#banner-governo {
    position:relative;
    width:300px;
    height:100px;
}
.banner-gov {
    position:absolute;
    top:0;
    right:0;
    display:none;    
}

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

HTML

<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>

再次感谢！

Answer 1

检查出来。 http://jsfiddle.net/kTS3t/4/

我们的想法是使用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();

            });

    })

动态随机横幅

1 个答案: