Jquery Anything 滑块导航栏回调

Question

我为 Anything Slider 创建了一个自定义导航栏功能，它将根据单击的“按钮”切换幻灯片。我还需要编写一些内容，当按下其中一个滑块箭头时将切换“当前”类，但我找不到要查找的事件名称或在何处插入回调函数。

任何帮助将不胜感激。如果有帮助的话，我已经添加了我的导航栏功能。

$('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
        }
    });
});

Answer 1

您可以只使用 appendControlsTo 选项并让插件完成所有工作（demo ）。

在AnythingSlider（版本1.7+）的最新版本中，您可以附加箭头（单独）、控制面板（导航+播放按钮）、导航或仅播放按钮到页面上的任何元素。

或者，如果您需要保持菜单完整，请尝试以下操作（演示）：

$('#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));
});

Answer 2

查看了插件源代码后，我认为单击箭头时它不会广播事件。这很容易添加，但是如果您不想修改插件，则在插件代码运行后，您可以将自己的点击处理程序绑定到箭头，然后在这些处理程序中获取当前页面并通过 AnythingSlider 的外部 API 获取的页数：

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

请注意，var current 将提供点击之前的页码，因此您需要加或减 1 并确保你正在处理正确地结束范围。然后确定实际的当前页面后，您应该能够将 current 类应用到您所需的 LI。

顺便说一句：由于您要向这些 LI 添加当前类，所以我认为当 $(this).attr('class ') 返回 'navItem2 current' 而不仅仅是 'navItem2'。对其进行一些重构可能会在以后减轻您的痛苦。