jQuery Anything Slider Nav Bar Callback

如何解决jQuery Anything Slider Nav Bar Callback

| 我为Anything Slider创建了一个自定义的导航栏功能，该功能将根据单击“按钮”的位置来切换幻灯片。我还需要编写一些内容，当按下其中一个滑动箭头时会切换\'current \'类，但是我找不到要查找的事件名称或在哪里插入回调函数。 任何帮助，将不胜感激。如果有帮助，我已经包含了我的导航栏功能。

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

    

解决方法

        您可以只使用

appendControlsTo

选项，并让插件完成所有工作（演示）。 在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));
});

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

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

请注意，“ 4”会在点击前提供页码，因此您需要加减1，并确保正确处理了范围的末尾。然后，在确定当前当前页面的情况下，您应该可以将

current

类应用于所需的

LI

。 顺便说一句：由于您将向这些LI添加当前类，所以我认为当

$(this).attr(\'class\')

返回

\'navItem2 current\'

而不是

\'navItem2\'

时，

switch

语句会出现问题。进行一些重构可能会在以后减轻您的痛苦。