1

私はプログラマーというよりはデザイナーですが、プラグインを超えた Web デザインに関しては、より多くのデザイン オプションがあるように、javascript のコツをつかもうとしています。だからここに私が抱えている問題があります。

4 つのスライド ショーを含むページがあります。現在、4つのボタンの1つがクリックされると、画像ソースを取得して配列を変更し、4秒ごとに画像をループするようにしています。

最初はスライドショーは問題なく表示され、画像が非表示のときに変更が発生しますが、数分後、ソースの変更はフェード効果で時間切れになり、表示されたときに発生します. また、問題なくショーを切り替えることもできます。

すべてのタイミングと変数がリセットされ、onClick-call からの新しいパラメーターによって、使用される配列が切り替わります。画像変更部分を独自の関数にし、他の関数から呼び出してタイミングをさらに制御するという1つのソリューションを試しましたが、何らかの理由clearTimeoutでループをクリアするために作業を停止し、ループの1つのインスタンスを同時に再生します別の時間。

誰かがこのコードを見て、タイミングの問題を簡単に解決できるかもしれません。

i=0
var delay=4000
var fade=1000
var timer;

function play(showNum){
    var showNum = showNum; 
    $("#show").stop(true,true)
    newShow(); 
    changeInfo(showNum);
    $("#show").hide();
    change(showNum);
}

function change(showNum){
    $("#show").fadeIn(fade);
    $("#show").attr("src",showNum[i]);
    i = (i+1)% showNum.length;
    $("#show").delay(delay-(fade*2)).fadeOut(fade);
    timer=setTimeout (function(){change(showNum)},delay)
}

function newShow(){
    clearTimeout(timer);
    i=0;
}

これを投稿してからのコードの更新は次のとおりです。

function play(showNum){
var showNum = showNum; 
$("#show").stop(true,true);
newShow(); 
$("#show").hide();
changeInfo(showNum);
change(showNum);
$("#show").fadeIn(fade);
setTimeout(function(){loop(showNum);},fade*2);
}
function loop(showNum){
$("#show").fadeOut(fade);
setTimeout (function(){change(showNum);},fade);
$("#show").fadeIn(fade);
int=setTimeout (function(){loop(showNum);},delay);
}

function change(showNum){
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
}

function newShow(){
 clearTimeout(int);
 i=0;
}

もうタイミングの問題はありませんが、画像が変更されてから元に戻り、前のスライドショーの次の画像でフェードインするフェードアウトのときに新しいスライドショーをクリックすると、奇妙な問題が発生します次にフェードアウトし、そこから右のスライド ショーを開始します。

4

0 に答える 0