Question

I’m trying to make a random preloaded banner with an unknown (but few) number of images.

I’m newbie on Javascript and jQuery but I almost got it working fine:
http://jsfiddle.net/kTS3t/1/

I suppose that there is something wrong because timing is not ok.
I split the first banner on javascript code because I want it to be shown with no delay.

Any clue whats wrong?

Thanks a lot!

Code (like on 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>​

Thanks again!

Answer 1

Check it out.
http://jsfiddle.net/kTS3t/4/

The idea is to cycle the images using mod operator and recall the animation function indefinitely using the callback function of 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();

            });

    })