2

1ページに可変数のスライダーがあります。各スライダーには、可変数のスライドと、それぞれのスライドを順番にナビゲートするための1対の前/次ボタンが含まれています。

典型的なスライダーのマークアップは次のとおりです。

<section class="foo">
    <button class="prev"></button>

    <ul class="container slider">
        <li class="slide" id="a01"></li>
        <li class="slide" id="a02"></li>
        <li class="slide" id="a03"></li>
    </ul>

    <button class="next"></button>
</section>

各スライダーは、現在表示されているスライドのインデックスを認識している必要があります。これにより、ページの読み込み時に、すべての要素をループして$('.slider')、それぞれのオブジェクトをインスタンス化する必要があると思います。スライダーを定義するクラスを作成するにはどうすればよいですか？表示されている現在のスライドのインデックスを含むプロパティと、ユーザーが[次へ]または[前へ]をクリックしたかどうかに応じてそのプロパティをインクリメントまたはデクリメントするメソッドが必要です。私はこれまで来ました：

var slider = function () {
    this.pager = 0;
    this.incrementPager = function () {
        console.log(this.pager++);      
    };
};

$(function () {
    $('.prev, .next').click(slider);
});

...しかし、私のコードはあまり機能しません:)

4

3 に答える 3

4

jQueryプラグインを作成する方法は次のとおりです。これは、クラスベースのOO向けではないjQueryを使用しているため、より良い方法だと思います。

$.fn.slider = function() {
    $(this).each(function() {
        var wrapper = $(this);
        var index = 0;
        var listItems = wrapper.find('.slide');
        wrapper.find('.prev').click(function(){
            if (index > 0) {
                $(listItems[index]).removeClass('active');
                index--;
                $(listItems[index]).addClass('active');
            }
        });
        wrapper.find('.next').click(function(){
            if (index < listItems.length - 1) {
                $(listItems[index]).removeClass('active');
                index++;
                $(listItems[index]).addClass('active');
            }
        });

    });
};

そして、あなたはそれを次のように使うことができます

$('section').slider();

実例 http://jsfiddle.net/MR8wE/

本当にOOが必要な場合は、次のようにすることができます（ただし、jQueryの動作に反すると思います）。

/**
 * Adds behavior to the HTML for a slider
 */
function Slider(wrapper) {
    var me = this;
    me.wrapper = $(wrapper);
    me.index = 0;
    me.listItems = wrapper.find('.slide');
    wrapper.find('.prev').click(function(){
        me.prev(); 
    });
    wrapper.find('.next').click(function(){
        me.next();
    });                    
}

Slider.prototype.next = function() {
    this.go(1;)
}
Slider.prototype.previous = function() {
   this.go(-1);
}
Slider.prototype.go = function(steps) {
    var oldIndex = this.index;
    var newIndex =  oldIndex + steps
    if (newIndex >= 0 && newIndex < this.listItems.length ) {
        $(this.listItems[oldIndex]).removeClass('active');
        $(listItems[new]).addClass('active');
        this.index = newIndex;
    }

}

その後、あなたはそれを次のように使用します

var sliders = [];
$('section').each(function(){
     sliders.push(new Slider(this));        
});

// Control the slider without user intervention
sliders[0].next();
sliders[1].go(2);

例http://jsfiddle.net/MR8wE/2/

于 2012-10-10T16:16:05.683 に答える
2

コメントの質問に答えて：

function Slider(elm)
{
    this.domElement = elm;
    this.pager = 0;
}
Slider.prototype.incrementPager = function()
{
    this.pager++;
};//all instances share this method ==> only 1 function object in mem.
$(function()
{
    var objectCollection = (function(elements)
    {
        var toReturn = [];
        var scanElementsFunction = function()
        {//declared in this scope, to have access to elements var
            'use strict';//avoid setting globals
             if (this.allElems === undefined)
             {
                 this.allElems = elements;
             }
             return this.allElems;
        };
        elements.each(function(idx,el)
        {
            toReturn[idx] = new Slider(el);//<-- pass DOMElement to constructor
            toReturn[idx].getAll = scanElementsFunction;//<-- reference, no new function object
        });
        return toReturn;
    }($('.prev, .next')));//this scope preserves the elements returned by jQuery selector
    console.log(objectCollection);
});

そこには本当に役立つものは何もありませんが、スニペットをできるだけ短くしながら、できるだけ多くのトリックとヒントを取り入れようとしました。コードの一部が不明確な場合は、お知らせください。もう少し説明します（1、2時間かかる場合があります。これから、一口食べます:)）

于 2012-10-10T15:59:51.033 に答える
2

次のアプローチでは、より正式なコンストラクター関数とプロトタイプを使用して、エンクロージャーをスタックするのではなく、非常に軽量に保ちます。コンストラクターは...

function Slider(slides, transition) {

    // Keeps a reference to the current slide index
    this._current = 0;

    // An array of slides
    this._slides = slides;

    // A transition function
    this._transition = transition;
}

スライドの配列と、それらの間を移動するときに2つのスライドが与えられる関数を受け入れます。これは、トランジション効果を外部化することで制御し続けることを意味します。また、フレームワークに依存せず、jQueryやその他のフレームワークへの依存関係はありません。コンストラクター自体はあまり機能しません。次の方法は私たちの肉です...

// The function that swaps slides
Slider.prototype.goto = function(i) {

    // Do a bit of sense checking
    if(i > this._slides.length || i < 0)
        throw new Error("Slide does not exist");

    // Swap the slides by passing them to the transition function
    var currentSlide = this._slides[this._current];
    var nextSlide = this._slides[i];
    this._transition(currentSlide, nextSlide);

    // Update the current index
    this._current = i;
};

スライドの新しいインデックスを取得し、古いスライドと新しいスライドを遷移関数に渡します。次に、現在のスライドの追跡に使用するインデックスを更新します。次に、回転する前と次の関数を実装する必要があるため、次のメソッドでは、モジュラスを使用してそれを行う方法を説明します。負のモジュラスはこの関数で希望どおりに機能しないため、スライドの長さを追加する必要があることに注意してください。

// Calculate the next index as a rotating index
Slider.prototype.getNextIndex = function() {
    return (this._current + 1) % this._slides.length;
};

// Calculate the previous index as a rotating index
Slider.prototype.getPrevIndex = function() {
    return (this._current + this._slides.length - 1) % this._slides.length;
};

次に砂糖を加えます...

// Sugar to go next and prev
Slider.prototype.next = function() {
    this.goto(this.getNextIndex());
};
Slider.prototype.prev = function() {
    this.goto(this.getPrevIndex());
};

前のボタンと次のボタンをスライダーに関連付ける際に問題が発生する可能性があります。スライダー要素の前後でそれらを見つけることができます。または、以下で行ったように、スライダー要素にそれらを含めることができます。jQueryを使用してスライダーを設定するには、次のようにします...

$(".slider").each(function() {
    var slider = new Slider($(this).find(".slide"), function(a, b) {
        $(a).hide();
        $(b).show();
    });
    $(this).data("slider", slider);
    $(this).find(".prev").click(function() {
        slider.prev();
    });
    $(this).find(".next").click(function() {
        slider.next();
    });
});

編集これが実際の動作ですhttp://jsfiddle.net/w8u69/

Sliderまた、トランジションのロジックが公開されているため、元の「クラス」を変更することなく、トランジション効果を非常に簡単に追加できます。http://jsfiddle.net/w8u69/1/

編集元のスライダーの「クラス」を変更せずに、このアプローチのパワーを示すために、スライド間を自動的に移動するロジックを追加できます。これはデコレータまたは継承を使用して実行できますが、この例は、コンポジションを使用して実行する方法を示しています。http://jsfiddle.net/w8u69/4/

最後にもう1つ、これは純粋なOOアプローチでおそらく最も重要なことです。統合コードを変更し、OOの「クラス」をそのままにしておくことで、スライダー用に作成したロジックを再利用して、まったく異なるものにプラグインできます。フレームワーク。このフィドルは、MooToolsで動作していることを示していますhttp://jsfiddle.net/w8u69/5/

于 2012-10-10T16:18:57.850 に答える