0

自分のスライドショーを作成しようとしています。利用可能なプラグインがたくさんあることは知っていますが、自分のニーズに合ったプラグインは見つかりませんでした。

スライドショー自体は機能しますが、私が遭遇する問題はアニメーションです。次のボタンを複数回クリックすると、すべてが台無しになります。

.stop（）関数も.clearQueue（）関数も機能します。これは、アニメーションを最初に終了せずに停止させるためです。

出典： http： //www.alphadesigns.nl/ADtest/JQ/js/portfolio.js

プレビュー： http： //www.alphadesigns.nl/ADtest/JQ/

どんな助けでも大歓迎です！

ps。スライドショー自体はロングショットで終了していません。「巨大な画像」は小さなサムネイルなどに変更されますが、最初にアニメーションを正しく機能させたいと思います。

4

1 に答える 1

0

スクリプトを見ると、競合状態に陥っているように見えます。思ったよりも速くクラスを削除および追加しているため、1 つだけを選択するつもりだったときに複数のアイテムを選択している状態が作成されます。

例えば：

slidecontent = $('.slidecontent');
slideimg.prepend(slidecontent.children('img').addClass('slidecontent'));
slidecontent.removeClass('slidecontent').addClass('slideleft thisclassc');

previmg関数には上記の行があります。この関数をトリガーするボタンをクリックするのが早すぎるとslidecontent、リスト内の次の要素に同じクラスを割り当てたため、オブジェクト内に複数の項目が存在することになります。関数が完了するまで何らかの方法でロックアウトするか、より具体的なセレクターを作成する必要があります。

これを行う最も簡単な方法は、ロックフラグを作成することですが、最もエレガントではありません。次に、関数が実行される前にロック フラグをテストして、競合状態を回避し、すぐに戻って余分なクリックを無視するようにインスタント タイムアウトを設定します。

var animActive = false;

$.fn.previmg = function(){
    $(this).click(function(){
        if(totalrightimg != 0 && animActive==false){
            animactive = true;
            setTimeout(function(){
                //everything else
                animactive = false;
            },0);
        }
        else if(totalrightimg == 0 && animActive==false){
            animactive = true;
            setTimeout(function(){
                //everything else
                animactive = false;
            },0);
        }
    }
});

この変数を追加してからこのチェックを行うと、操作を重ねて実行することがなくなるため、競合状態を確実に回避できます。操作が実行されるたびに、完了するまで再度実行する機能がロックアウトされます。したがって、その後のクリックは無視されます。

この動作が望ましくない場合は、' slidecontent' クラスのセレクターを絞り込んで、1 つの要素のみを選択していることを確認する方法を検討する必要があります。

編集:クリックイベントの同期処理を完全に無視しました。私の悪い。上記のコードは、ロックとロック解除を別々のスコープに強制するため、変更コードを安全に実行できます。

于 2012-12-26T16:38:40.037 に答える