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+）的latest verison中，您可以将箭头（单独），控制面板（导航+播放按钮），导航或仅播放按钮附加到页面上的任何元素。

或者，如果您需要保持菜单完好无损，请尝试此操作（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));
});

Answer 2

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

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

请注意，var current会在点击之前提供页码，因此您需要添加或减去一个，并确保您处理的是结束范围正常。然后，在确定了当前真实页面的情况下，您应该可以将current课程应用到所需的LI。

顺便说一句：既然你要向这些LI添加一个当前的类，我认为当switch返回$(this).attr('class')时，你的'navItem2 current'语句会出现问题仅'navItem2'。对它进行一些重构可能会在以后挽救你的痛苦。

Jquery Anything Slider Nav Bar Callback

2 个答案: