0

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

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

$('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选项并让插件完成所有工作（演示）。

在最新版本的 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));
});
于 2011-07-07T00:13:20.390 回答
0

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

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

请注意，将在单击之前var current提供页码，因此您需要添加或减去一个并确保您正确处理了范围的结尾。然后在确定了真正的当前页面后，您应该能够将该类应用于您想要的.currentLI

顺便说一句：由于您要向这些 LI 添加一个当前类，我认为您的switch语句在$(this).attr('class')返回时会出现问题，'navItem2 current'而不仅仅是'navItem2'. 对此进行一些重构可能会在以后为您节省痛苦。

于 2011-06-16T15:36:08.123 回答