0

一連の画像を循環してオブジェクトを回転させる効果を生み出す単純な 360 度画像回転子があります。最初の画像が過ぎた後にフェードアウトするオブジェクトを回転できることをユーザーに示すインジケーターを追加したいと考えています。だから私はこの関数を私の最後に追加しました360.js

(function(){
     if(
$('#first').css('visibility','hidden')) {
    $('#rotate').fadeOut();
} 
else {
    $('#rotate').fadeIn();
}

     });

スクリプトにエラーはありません。画像が表示されているかどうかを確認していないだけです。私は自分で呼び出された mousedown および mousemove イベントにバインドしようとしました360.jsが、うまくいきませんでした。これを解決する方法について何か考えはありますか？

フィドルはこちら

4

2 に答える 2

1

コメントに記載した以外に、大きな問題が 1 つあります。

currentImage を 0 ではなく 1 に設定しており、インデックスは 0 ベースです。そのため、必要な画像は二度と表示されないため、フェードインは発生しません。

また、クラス「notseen」があるかどうかも確認しますが、hidden の確認も同様に適切であるはずです。

これが私の最新の修正です。一般的に機能することがわかります：http://jsfiddle.net/y7WmA/6/

そして、ここに重要なスニペットがあります：

.bind('mousemove touchmove', function (e) {
    fadeInOut();
    // ...
        if (Math.abs(currPos - pageX) >= widthStep) {
            if (currPos - pageX >= widthStep) {
                currImg++;
                if (currImg > imageTotal) {
                    currImg = 0;
                }
            } else {
                currImg--;
                if (currImg < 0) {
                    currImg = imageTotal;
                }
            }
// ...
function fadeInOut() {
    if ($('#first').hasClass('notseen')) {
        console.log("hidden");
        $('#rotate').fadeOut();
    } else {
       console.log("visible");
        $('#rotate').fadeIn();
    }

};
于 2013-10-07T16:02:56.107 に答える
1

JSFiddle の難しい点の 1 つは、スクリプトを配置する場所です。JSFiddle がページの読み込み時にすぐにイベントをロードしていたため、スクリプトがイベントを DOM にバインドするのに問題があったようです。これは、あなたが現地で経験したことと関係があるかもしれませんし、ないかもしれません。

それにもかかわらず、ここで JSFiddle を少し変更しました: JSFiddle。firstMove ブール値を追加したことに注意してください。これにより、次のスクリプトが有効または無効になります。

   if (!firstMove) {
        $('#rotate').fadeOut()
        firstMove = true;
    }

プレースホルダーは、最初の動きの直後にフェードアウトします。最終的には、ブールトラッカーの使用を避ける方法を見つけたいと思っていますが、これで正しい方向に向かうはずです!

編集:また、現在のバージョンでは、画像上で動きが発生するたびに評価が実行されていることに注意してください。これは、特に jQuery セレクターを使用する場合にコストがかかる可能性があります。

于 2013-10-07T15:52:05.373 に答える