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 に答える