動態隨機橫幅

Question

我正在嘗試使未知（但很少）數量的圖像隨機預加載橫幅。

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

再次感謝！

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

      }); 

    })