0

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

我是 Javascript 和 jQuery 的新手，但我几乎可以正常工作：http: //jsfiddle.net/kTS3t/1/

我想有什么问题，因为时机不对。我在 javascript 代码上拆分了第一个横幅，因为我希望它立即显示出来。

任何线索有什么问题吗？

非常感谢！

代码（如http://jsfiddle.net/kTS3t/1/上）：

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

再次感谢！

4

1 回答 1

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

            });

    })
于 2012-10-30T08:35:52.783 回答