0

画像のコンテナである絶対配置の div のセットがあります。各 div には のクラスがphotoCoverあり、各 img には のクラスがありfbPhotoます。ページの読み込み時にコレクション内の各画像をフェードアウトさせ、下の画像を表示してからループするループ機能を設定しました。

ユーザーがこれらのいずれかをクリックしたときにこれを停止できるようにする必要があります。

$(this).stop(true, true)SOでいくつかの例を含むさまざまなオプションを試しましたが、何も機能しないようです。

ループ関数のコードは次のとおりです

var thumbNailTimeOut;
function loopSmallSlides(eleArray) {
    var slideCount = eleArray.length;
    $(eleArray).each(function (indexInArray) {
        var ele = this;
        thumbNailTimeOut = setTimeout(function () {
            if (indexInArray == slideCount - 1) {
                $(eleArray).fadeIn('slow').on("click", function () {
                    clearTimeout(thumbNailTimeOut);
                }); 
                clearTimeout(thumbNailTimeOut);
                loopSmallSlides(eleArray); // loop the function when the end is reached
            } else {
                $(ele).fadeToggle('slow').on("click", function () {
                    clearTimeout(thumbNailTimeOut);
                }); 
            };
        }, (indexInArray + 1) * 1000);
    });
};

document.readyループ関数は、次のように生成された要素の配列を受け入れます。

$(document).ready(function () {
    $('.photoCover').each(function () {
        // get an array of elements to slide
        var eleArray = $(this).children('.fbPhoto').get().reverse();
        loopSmallSlides(eleArray);
    });
});

スニペット

$(ele).fadeToggle('slow').on("click", function () {
    clearTimeout(thumbNailTimeOut);
});

これらの要素のいずれかがクリックされたときにタイムアウトをクリアするように、配列内の各要素にクリック ハンドラーを追加しようとしていますが、機能していません。ご覧のとおり、変数thumbNailTimeOutはグローバルに使用可能な変数です...これは、私が理解している限り、それをキャンセルするために機能するはずtimeOutですか?

前述のように、使用しようとしstopましたが、どこにも行けませんclick。親要素に a を追加してから、以下のように子をループしてアニメーションを削除しようとしましたが、うまくいきません。

$('.photoCover').each(function () {
     $(this).children('.fbPhoto').stop(true, true);
});

必要な場合の HTML は次のようになります。

<style>
   .photoCover{display:inline-block;width:204px;height:194px;vertical-align:top;}
   .fbPhoto{position:absolute;display:inline-block;width:110px;height:110px;margin:4px;background-position:center center;background-repeat:no-repeat;border-radius:5px;border:16px groove #93BABA;background-color:#93BABA;}
</style>

<div class="photoCover">
   <h4>Album Title</h4>                     
   <span style="background-image: url('IMG URL');" class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>                        
</div>

だから私の質問は、親要素内にネストされた画像の各セットにこのループを設定した.photoCover後、クリックでそのアニメーションを一時停止してから再開するにはどうすればよいですか?

どんな助けでも大歓迎です！これについて SO には他にも多くの質問があるようですが、この例ではうまくいく答えが得られません!

4

1 に答える 1

1

この関数では、thumbNailTimeOut が何度も上書きされています。

$(eleArray).each(function (indexInArray) { /* fn body */ });

関数が作業を終了した後、変数に格納されるのは、設定した最後のタイムアウトだけです。変数を配列として使用してみてください。例えば：

thumbNailTimeOut[index] = setTimeout(function () { /* fn body */ }, delay);

タイムアウトをクリアすると、次のようになります。

clearTimeout(thumbNailTimeOut[index]);


しかし、正直に言うと、多くのタイムアウトを使用するというあなたのアプローチは好きではありません。おそらく、単一の間隔関数を使用する方がはるかに便利です。

編集:
私はあなたの関数を間隔で書き直そうとしました。まだ試していませんが、タイムアウト コードよりもずっときれいに見えます。

function loopSmallSlides(eleArray) {
    var interval
    ,   $elems = $(eleArray);
    ,   current = 0;
    ,   slideCount = eleArray.length;

    interval = setInterval(function(){
        current = intervalFn($elems, current);
    }, 1000);

    $elems.on('click', function(e) {
        clearInterval(interval);
    });
};

function intervalFn($elems, current) {
    if( current < $elems.length) {
        $elems.eq(current).fadeIn('slow');
        return current+1;
    } else {
        $elems.fadeOut('slow');
        return 0;
    }
}
于 2012-11-29T13:23:40.357 に答える