交互式左右滑动导航菜单设计

交互式左右滑动导航菜单

本文将指导您如何创建一个支持左右滑动的导航菜单，该菜单能够有效地展示多个项目，并通过简单的点击操作实现内容的滚动显示。

HTML结构:

以下是实现此功能的基本HTML代码示例：

    
    
    
    
    


    

        

            
首页1

            
首页2

            
首页3

            
首页4

            
首页5

            
首页6

            
首页7

            
首页8

            
首页9

            
首页10

        

        «
        »
    


    

上述代码定义了一个基本的HTML页面，其中包含了一个无序列表作为导航菜单项，以及两个按钮用于控制滑动方向。

CSS样式:

为了使导航菜单看起来更加美观，我们添加了一些CSS样式：

.slider {
    border: 1px solid #000;
    padding: 4px;
    width: 500px;
    overflow: hidden;
}

.menuItem {
    float: left;
    list-style: none;
    margin-right: 10px;
}

.navigation {
    cursor: pointer;
    font-size: 20px;
    color: blue;
    text-decoration: none;
}

.disabled {
    opacity: 0.2;
    filter: alpha(opacity=20);
}

这些样式设置了导航菜单的基本外观，包括边框、内边距、宽度等，并且对导航按钮进行了样式化处理。

Javascript插件:

接下来是实现滑动效果的核心Javascript代码：

(function($) {
    var totalItems = 0,
        containerSelector,
        options,
        firstVisibleIndex = 0,
        isAnimating = false;

    $.fn.simple_slider = function(settings) {
        settings = $.extend({}, $.fn.simple_slider.defaults, settings);
        cOntainerSelector= this.selector;
        optiOns= settings;
        totalItems = $(containerSelector + ' li').length;
        _initialize();

        function _initialize() {
            $(containerSelector + ' li').each(function(index) {
                if (index >= options.display) {
                    $(this).hide();
                }
            });

            $('#' + options.leftID).on('click', function() {
                if (!isAnimating) _slideLeft();
            }).on('mouseover', function() {
                $(this).addClass('navigation');
            }).on('mouseout', function() {
                $(this).removeClass('navigation');
            });

            $('#' + options.rightID).on('click', function() {
                if (!isAnimating) _slideRight();
            }).on('mouseover', function() {
                $(this).addClass('navigation');
            }).on('mouseout', function() {
                $(this).removeClass('navigation');
            });

            $('#' + options.leftID).addClass('disabled');
            _updateNavigationStatus();
        }

        function _slideLeft() {
            isAnimating = true;
            if (firstVisibleIndex > 0) {
                $(containerSelector + ' li:eq(' + (firstVisibleIndex + options.display - 1) + ')').fadeOut('normal', function() {
                    firstVisibleIndex--;
                    $(containerSelector + ' li:eq(' + firstVisibleIndex + ')').fadeIn('normal', function() {
                        isAnimating = false;
                        _updateNavigationStatus();
                    });
                });
            } else {
                isAnimating = false;
            }
        }

        function _slideRight() {
            isAnimating = true;
            if (firstVisibleIndex + options.display                 $(containerSelector + ' li:eq(' + firstVisibleIndex + ')').fadeOut('normal', function() {
                    firstVisibleIndex++;
                    $(containerSelector + ' li:eq(' + (firstVisibleIndex + options.display - 1) + ')').fadeIn('normal', function() {
                        isAnimating = false;
                        _updateNavigationStatus();
                    });
                });
            } else {
                isAnimating = false;
            }
        }

        function _updateNavigationStatus() {
            if (firstVisibleIndex === 0) {
                $('#' + options.leftID).addClass('disabled');
            } else {
                $('#' + options.leftID).removeClass('disabled');
            }

            if (firstVisibleIndex + options.display >= totalItems) {
                $('#' + options.rightID).addClass('disabled');
            } else {
                $('#' + options.rightID).removeClass('disabled');
            }
        }
    };

    $.fn.simple_slider.defaults = {
        display: 6,
        leftID: null,
        rightID: null
    };
})(jQuery);

这段Javascript代码定义了一个名为simple_slider的jQuery插件，它允许用户通过点击左右箭头来滑动显示列表中的项目。插件还提供了默认配置选项，如每次显示的项目数量等。

此外，该插件依赖于jQuery 1.3或更高版本。

效果展示：

来源：原文链接