0

変数itemIntervalによって設定された間隔で、画像間でフェードするループがあります。そのようです：

            // interval between items
            var itemInterval = 5500;

            // start loop
            var infiniteLoop = setInterval(function() { 

                // initial fade out
                $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

                // set counter
                if (currentItem == numberOfItem -1) {
                    currentItem = 0;
                } else {
                    currentItem++;
                }

                // next item fade in
                $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);

ループが最初に実行されたときにのみ実行される最初の時間間隔と、その後毎回実行される2番目の時間間隔がある場合、私が本当にやりたいことです。

したがって、ユーザーがページを開くと、最初のクロスフェードは非常に高速ですが、次の画像がクロスフェードするまでの待ち時間が長くなります。

私はJavascriptを初めて使用するので、コードを編集して機能させることができ、何をしたかを教えていただければ幸いです。よろしくお願いします:)

4

2 に答える 2

1

匿名の関数の代わりに通常の関数を使用してみることができます。

        // interval between items
        var itemInterval = 5500;
        var infiniteLoop;//this contains the id of the interval to be used in clearinterval by the way
        setTimeout(function(){
              // this code will run only once, one second after the page loads.
              myFunc();
              infiniteLoop = setInterval(myFunc, itemInterval);
              // commence loop that will run forever unless you use clearinterval(infiniteLoop);
        }, 1000);
        // start loop


        function myFunc() { 
            // this code will run every time the function is called
            // initial fade out
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            // set counter
            if (currentItem == numberOfItem -1) {
                currentItem = 0;
            } else {
                currentItem++;
            }

            // next item fade in
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }

このようにして、この関数を手動で呼び出してから、インターバルを開始することができます。

于 2012-04-08T15:17:02.587 に答える
1

これを試して：

// interval between items
var itemInterval = 5500;

// start loop
var infiniteLoop = setInterval("fadeChange()", itemInterval);

function fadeChange() {
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);

// set counter
if (currentItem == numberOfItem -1) {
    currentItem = 0;
} else {
    currentItem++;
}

// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}

これにより、関数が最初に呼び出されるのを回避でき、関数は5.5秒ごとに呼び出される必要があります。

于 2012-04-08T15:21:27.017 に答える