0

どの「ボタン」がクリックされたかに基づいてスライドを切り替える Anything Slider 用のカスタム ナビゲーション バー関数を作成しました。また、スライダーの矢印の 1 つが押されたときに「現在の」クラスを切り替える何かを記述する必要がありますが、検索するイベント名やコールバック関数を挿入する場所が見つかりません。

どんな助けでも大歓迎です。役立つ場合は、ナビゲーションバー機能を含めました。

$('nav ul li').click(function(){ 

    $('nav ul li').removeClass('current'); // reset current menu button

        var slideName = $(this).attr('class'); // get class name

        $(this).toggleClass('current'); // make button current

        $('section.about_us').fadeOut('slow');
        $('#about_us_container').fadeOut('slow', function(){ // hide about us page

        switch (slideName){ //change slide
            case 'navItem1':
                $('#slider').anythingSlider(1);
                    break;
            case 'navItem2':
                $('#slider').anythingSlider(2);
                break;
            case 'navItem3':
                $('#slider').anythingSlider(3);
                break;
            case 'navItem4':
                $('#slider').anythingSlider(4);
                break;
            case 'navItem5':
                $('#slider').anythingSlider(5);
            default:
                //do nothing
        }
    });
});
4

2 に答える 2

1

オプションを使用しappendControlsToて、プラグインにすべての作業をさせることができます ( demo )。

AnythingSliderの最新バージョン(バージョン 1.7 以降) では、矢印 (個別)、コントロール パネル (ナビゲーション + 再生ボタン)、ナビゲーション、または再生ボタンのみをページ上の任意の要素に追加できます。

または、メニューをそのままにしておく必要がある場合は、これを試してください ( demo ):

$('#slider').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onSlideComplete: function(slider){
        $('nav ul li').eq(slider.currentPage-1).trigger('click');
    }
});

$('nav ul li').click(function() {
    // prevent infinite loop
    if ($(this).is('.current')) { return; }

    $('nav ul li').removeClass('current'); // reset current menu button
    var slideName = $(this).attr('class'); // get class name
    $(this).toggleClass('current'); // make button current

    $('#slider').anythingSlider(slideName.slice(-1));
});
于 2011-07-07T00:13:20.390 に答える
0

プラグインのソースを調べたところ、矢印をクリックしたときにイベントがブロードキャストされるとは思えません。これを追加するのは非常に簡単ですが、プラグインを変更したくない場合は、プラグイン コードを実行した後、独自のクリック ハンドラーを矢印にバインドし、それらのハンドラーで現在のページを取得して、 AnythingSlider の外部 API 経由のページ数:

var current = $('#slider').data('AnythingSlider').currentPage
var pages = $('#slider').data('AnythingSlider').pages

はクリックの前にページvar current番号を提供するため、1 を加算または減算し、範囲の終わりを適切に処理していることを確認する必要があることに注意してください。次に、実際の現在のページが決定されたら、クラスを目的の に適用できるはずです。currentLI

余談ですが、現在のクラスをこれらの LI に追加する予定なswitchので$(this).attr('class')、'navItem2 current'単に'navItem2'. それをリファクタリングすることで、後で苦労することはなくなるでしょう。

于 2011-06-16T15:36:08.123 に答える