Jquery Anything Slider导航栏回调

Jquery Anything Slider Nav Bar Callback

本文关键字：回调 导航 Slider Anything Jquery      更新时间：2023-09-26

我为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
        }
    });
});

您可以使用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

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

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

相关文章：