3

Jquery を使用して回転ボックス効果を作成しようとしています。合計 8 つのクラスを持つ 8 つの div ボックスを作成しました。クラスのうち 4 つはアクティブな状態で、4 つのクラスは非アクティブな状態です。アクティブなクラスと非アクティブなクラスの違いは、幅、高さ、および絶対位置の座標です。

したがって、基本的には 4 つの大きなボックスと 4 つの小さなボックスがあり、これらのボックスの内容をアクティブ (大きなボックス) から非アクティブ (小さなボックス) に自動的に切り替えたいと考えています。

回転効果を確認するには、jsfiddle リンク 1 にアクセスしてください: http://jsfiddle.net/gnswK/ アニメーションをこのように実行したいのですが、クリック トリガーは使用しません。クラスを自動回転または循環させるには、これが必要です。

  jQuery.fn.rotateClasses = function(classes, interval, max) {
    var currentRotation = 0;
    var timer = null;
    var rotateFn = (function() {
        var currentClass = currentRotation % classes.length;
        var previousClass = currentClass - 1;
        if(previousClass == -1) previousClass = classes.length - 1;
        this.addClass(classes[currentClass]).removeClass(classes[previousClass]);
        currentRotation += 1;
        if(max > 0 && currentRotation >= max) clearInterval(timer);
    })();
    timer = setInterval(rotateFn, interval);
    return this;
};

jQuery(document).ready(function() {
    $('#rotator').rotateClasses(["active", "active2", "active3", "active4", "non-active-1", "non-active-2", "non-active-3", "non-active-4"], 1000, 0)
});

アニメーションを再スクリプト化して自動回転を追加する私の試みを見てください。jsfiddle リンク 2: http://jsfiddle.net/gnswK/2/

4

1 に答える 1

0

アイデアは非常に優れていますが、実装にはいくつかの調整が必要でした。

まず、rotateFn転送先setIntervalは関数ではなく、最初の関数呼び出しから返されたものです (を使用したため(function(){...})())。

次に、間隔ハンドラが適切なオブジェクトにバインドされていませんでした。rotateFn.bind($(this))jQueryでは、目的のスコープをハンドラーにバインドするために使用できます。

3 番目に、同じクラスをすべてに設定するのではなく、クラスをローテーションする必要がありました。divしたがって、インデックスと現在のサイクルに基づいて、それぞれにクラスを割り当てる必要があります。

結果：

jQuery.fn.rotateClasses = function(classes, interval, max) {
    var currentRotation = 1;
    var timer = null;
    var rotateFn = function() {
        var len = classes.length;
        var cycle = currentRotation++ % len;
        this.find('> div').each(function(id,div){
            $(div).removeClass().addClass(classes[(cycle+id)%len]);
        });

        if(max > 0 && currentRotation > max) clearInterval(timer);
    };

    timer = setInterval(rotateFn.bind($(this)), interval);

    return this;
};


$('#rotator').rotateClasses(["active", "active2", "active3", "active4", "non-active-1", "non-active-2", "non-active-3", "non-active-4"], 1000, 20);

デモ。

ところで、元のフィドルのクラス割り当て順序は異なり、特定のローテーション ロジックに従っていませんでした。順序を変えたい場合は、ハンドラーを調整できます。

于 2013-08-04T07:35:12.473 に答える