jQueryはバナーローテータの問題を軽減します

Question

これはとてもシンプルなようですが、ここで私はそれを台無しにしています。

私は単純なバナーローテーターを作ろうとしています（私は、多くのプラグインがあることを知っています - 私は経験を積み重ねようとしています）。

問題＃1。現在、最初のイメージはフェードアウトせず、2番目のイメージだけがフェードアウトしません。これが解決され、タイムアウト後にフェードアウトに設定されます。私は、jQueryの負荷がDOMの準備ができてからすべての画像がロードされるのを待たずにいると思うので、画像がロードされる前にファンクションがトリガされるため、これが疑わしいです。私は同じ結果があったときに間違っていることを証明した。document.onload

問題＃2。私はこの機能を繰り返すことはできません。

while(true) { 
    setTimeout("fade()", 2500); 
} 

これは完全に失敗しました。 私は少しの経験があり、どんな方向のポイントもとても役立つでしょう！

コード：

$.fn.preload = function() { //preload the picture 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

function nextImg() { //generate random image path 
    var curImg = "images/"; 
    var randomNumber=Math.floor(Math.random()*11) 
    curImg += randomNumber; 
    curImg += ".jpg"; 
    $([curImg]).preload(); 
    return curImg; 
} 

function fade() { 
    var img = nextImg(); //grab the random image path 
    $("#umom1").fadeOut(1900, function() { 
     $("#umom1").attr("src", img); 
     $("#umom1").fadeIn(1900); 
    }); 
} 

$("document").ready(function() { 
setTimeout("fade()", 2500); 
}); 

Answer 1

あなたはsetInterval(fade, 2500)を呼び出す必要があります。
setIntervalメソッドは、setTimeoutとは異なり、xミリ秒ごとに関数を実行します。これは1回だけ実行されます。

setIntervalまたはsetTimeoutには決して文字列を渡すべきではありません。代わりに、関数を渡す必要があります。