0

特定のバナーに焦点を合わせるために、下部にアイコンが付いた比較的小さな動的バナー回転スクリプトを作成しました。バナー上でmouseenterを発射するとショーが一時停止しますが、バナーからマウスアウトすると、特定のバナーの遅延が短くなることがあります。一度だけ発生したかどうかはわかりますが、バナーがローテーションで戻るたびに遅延がその短い時間に設定され、バナーのリスト内の他の1つの場所で短縮が発生することがよくあります。良い。これは、まだ決定されていない一連のアクションによって修正できる場合があります。私のロジックがどこかでループをキャッチしているのではないかと疑い始めているので、プロセスは分岐し、2つのループを実行します。これにより、showNextBanner関数の呼び出しが高速化されます。これを解決する方法がわかりません。私'

以下のコードの関連部分であると私が思うものを含めます。

        var firstRun = true;
        var play = true;
        var current = 0;

        var banners = $$( '.banner' ); 
        banners.invoke( 'hide' );
        var images = $$( '.image' );
        var icons = $$( '.icon' );
        //dynamically clones an initial icon to match the number of banners
        initIcons();

        banners.invoke( 'observe', 'mouseenter', function( field ) {
            play = false;
        });

        banners.invoke( 'observe', 'mouseleave', function( field ) {
            if( !play ) {
                play = true;
                showNextBanner().delay(3);
            }
        });

        icons.invoke( 'observe', 'click', function( field ) {
                play = false;
                hideBanner( current );
                showBanner( findObj( icons, field.findElement()));
        });


        showNextBanner().delay(3); 


        function hideBanner( which ) {
            icons[ which ].src = blankIconSRC;
            banners[ which ].hide();
        }


        function showBanner( which ) {
            icons[ which ].src = selectedIconSRC;
            banners[ which ].show();
            current = which;
        }


        // loops the hiding and showing of icons 
        // (mouseenter sets play to false)
        function showNextBanner() {
            if( play ) {
                if( !firstRun ) {
                    if( ++current == banners.length ) current = 0;    
                    var previous = 0;
                    ( current == 0 )? previous = banners.length - 1: previous = current - 1;
                    hideBanner( previous );
                } else {
                    icons[0].src = selectedIconSRC;
                    firstRun = false;
                }
                showBanner( current );
                showNextBanner.delay(3);
            }
        }
    }());

結局のところ、クライアントはjQueryソリューションを望んでいるので、scriptaculousでは利用できないスライドイン効果を利用できます。ですから、そのすべての作業は無駄になります。幸いなことに、おそらくjCarouselを使用して、スタイルシートを微調整することができます。助けてくれてありがとう！

4

2 に答える 2

0

何が起こっているのかというと、複数の.delay呼び出しが積み重なっているのではないかと思います。したがって、残り3秒未満の1つがあり、showNextBannerが再度呼び出され、別の遅延タイマーが設定されます。

ドキュメントを読んでいると、.delayは、実際に関数呼び出しを遅らせるのではなく、jqueryイベントパイプラインにギャップを設けることを目的としているようです。遅延の代わりにsetTimeoutの呼び出しに切り替えると、タイムアウトのハンドルを取得できるため、新しいタイムアウトを設定する前にキャンセルできます（または、再生がfalseに設定されている場合はキャンセルし、再生がtrueの場合はリセットします）。これは、.delayのJQueryドキュメントに記載されています

于 2011-09-08T22:20:36.480 に答える
0

私の推測では、あなたが'ed関数を「キャンセル」しないので、彼らはあまりにも長い間ぶらぶらしますが、彼らが発砲するとき、彼らは間違っているdelay()ので何もしません。playしかし、プレイがtrue再開されると、すべてが再び効果を発揮し始めます。

の戻り値を保存し、値とともにdelay()使用してタイマーをキャンセルできclearTimeout()ます。

ただし、すべてのバナーに1つのコンテナーを使用し（アイコンもそこに配置することもできます）、個々のバナーではなく、その上にmouseenter/イベントを設定することもお勧めします。mouseleave次に、バナーの回転を開始/停止する要素が1つだけあります。また、回転を再生および停止する特定の関数と、特定のバナーを表示する関数にすべてを分割すると、よりクリーンなコード構造を取得できる可能性があります。

これが例です（コードを編集するのではなく、楽しみのためにまとめたものなので、まったく異なります。申し訳ありませんが、まだ何かに使用できることを願っています）

于 2011-09-09T20:38:38.993 に答える