Javascript 如何修改jQuery插件滑块以进行滚动和定向？

我发现了一个jQuery滑块插件，它几乎可以满足我的需要。我需要更改选项卡，使其位于右侧（通过添加选项）。另外，如果有3个以上的标签，我想在标签上添加滚动（也可以选择）。我试图让它看起来像这样，这是一个艺术家模型：

这是我试图用下面的代码修改的脚本：

这是CSS：

body {
    background: #EEE;   
    font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

#content {
    width: 750px;
    margin: 50px auto;
    padding: 20px;
    background: #FFF;   
    border: 1px solid #CCC;
}

h1 {
    margin: 0;
}

hr {
    border: none;
    height: 1px; line-height: 1px;
    background: #CCC;   
    margin-bottom: 20px;
    padding: 0;
}

p {
    margin: 0;  
    padding: 7px 0;
}

.clear {
    clear: both;
    line-height: 1px;
    font-size: 1px;
}

a { 
    outline-color: #888;    
}

---

有人能帮忙吗？

要增加盒子的高度，只需更改

div#feature(功能)列表

的高度，要添加额外的项目，只需在

功能(功能)列表

中的

ul

中添加额外的

li

项目即可增加盒子的高度

div#feature(功能)列表

，要添加其他项目，只需在

ul

列表内的

ul

中添加一个额外的

li

项目即可，没有花哨的滚动条或其他内容，但它将遍历每个项目，使其进入顶部索引。我花了很长时间让它正常工作。 您可以通过向列表中添加其他项来测试它

/*
 * FeatureList - simple and easy creation of an interactive "Featured Items" widget
 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/
 * Version: 1.0.0 (01/09/2009)
 * Copyright (c) 2009 jQueryGlobe
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
 * Requires: jQuery v1.3+
*/
;(function($) {
    $.fn.featureList = function(options) {
        var tabs    = $(this);
        var output  = $(options.output);

        new jQuery.featureList(tabs, output, options);

        return this;    
    };

    $.featureList = function(tabs, output, options) 
    {
        function slide(nr) {
            if (typeof nr == "undefined") {
                nr = visible_item + 1;
                nr = nr >= total_items ? 0 : nr;
            }

            tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

            output.stop(true, true).filter(":visible").fadeOut();
            output.filter(":eq(" + nr + ")").fadeIn(function() {
                visible_item = nr;  
            });

            $(tabs[(nr - 1 + total_items) % total_items]).parent().slideUp(500,function(){
                var order = "";
                for(var i = total_items; i > 0; i--)
                {
                    var nextInd = ((nr - 1) + i) % total_items;
                    var tab = $(tabs[nextInd]);
                    if(i == total_items)
                        tab.parent().slideDown(500);
                    tab.parent().prependTo(tab.parent().parent());
                    order += nextInd + ", ";
                }
            });
        }

        var options         = options || {}; 
        var total_items     = tabs.length;
        var visible_item    = options.start_item || 0;

        options.pause_on_hover      = options.pause_on_hover        || true;
        options.transition_interval = options.transition_interval   || 2000;

        output.hide().eq( visible_item ).show();
        tabs.eq( visible_item ).addClass('current');

        tabs.click(function() {
            if ($(this).hasClass('current')) {
                return false;   
            }
            slide( tabs.index( this) );
        });

        if (options.transition_interval > 0) {
            var timer = setInterval(function () {
                slide();
            }, options.transition_interval);

            if (options.pause_on_hover) {
                tabs.mouseenter(function() {
                    clearInterval( timer );

                }).mouseleave(function() {
                    clearInterval( timer );
                    timer = setInterval(function () {
                        slide();
                    }, options.transition_interval);
                });
            }
        }
    };
})(jQuery);

---

好的，没有花哨的滚动条或任何东西，但它会遍历每个滚动条，将其带到顶部索引。我花了很长时间让它正常工作。 您可以通过向列表中添加其他项来测试它

/*
 * FeatureList - simple and easy creation of an interactive "Featured Items" widget
 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/
 * Version: 1.0.0 (01/09/2009)
 * Copyright (c) 2009 jQueryGlobe
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
 * Requires: jQuery v1.3+
*/
;(function($) {
    $.fn.featureList = function(options) {
        var tabs    = $(this);
        var output  = $(options.output);

        new jQuery.featureList(tabs, output, options);

        return this;    
    };

    $.featureList = function(tabs, output, options) 
    {
        function slide(nr) {
            if (typeof nr == "undefined") {
                nr = visible_item + 1;
                nr = nr >= total_items ? 0 : nr;
            }

            tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

            output.stop(true, true).filter(":visible").fadeOut();
            output.filter(":eq(" + nr + ")").fadeIn(function() {
                visible_item = nr;  
            });

            $(tabs[(nr - 1 + total_items) % total_items]).parent().slideUp(500,function(){
                var order = "";
                for(var i = total_items; i > 0; i--)
                {
                    var nextInd = ((nr - 1) + i) % total_items;
                    var tab = $(tabs[nextInd]);
                    if(i == total_items)
                        tab.parent().slideDown(500);
                    tab.parent().prependTo(tab.parent().parent());
                    order += nextInd + ", ";
                }
            });
        }

        var options         = options || {}; 
        var total_items     = tabs.length;
        var visible_item    = options.start_item || 0;

        options.pause_on_hover      = options.pause_on_hover        || true;
        options.transition_interval = options.transition_interval   || 2000;

        output.hide().eq( visible_item ).show();
        tabs.eq( visible_item ).addClass('current');

        tabs.click(function() {
            if ($(this).hasClass('current')) {
                return false;   
            }
            slide( tabs.index( this) );
        });

        if (options.transition_interval > 0) {
            var timer = setInterval(function () {
                slide();
            }, options.transition_interval);

            if (options.pause_on_hover) {
                tabs.mouseenter(function() {
                    clearInterval( timer );

                }).mouseleave(function() {
                    clearInterval( timer );
                    timer = setInterval(function () {
                        slide();
                    }, options.transition_interval);
                });
            }
        }
    };
})(jQuery);

回答：

功能：

• 随时间滑动
• 单击下一步和上一步
• 支持大量幻灯片
• 平滑滚动
• 单击后移动到项目
• 悬停时停止移动
• 易于扩展，因为它使用cycle插件

花在项目上的时间：4小时回答：

功能：

• 随时间滑动
• 单击下一步和上一步
• 支持大量幻灯片
• 平滑滚动
• 单击后移动到项目
• 悬停时停止移动
• 易于扩展，因为它使用cycle插件

---

花在项目上的时间：4hr

他想让它滚动，伙计，而不是变大：）他想让它滚动，伙计，而不是变大：）我设置了一个JSFIDLE玩。应该帮助任何愿意尝试的人。我有一些想法。如果我弄明白了，我会发布一个答案@TruMan1，当您将鼠标悬停在滚动条上时，是希望滚动条，还是只需单击？这是一个JSFIDLE，它使用jQuery循环插件来实现与您正在使用的插件相同的效果。cycle插件比featureList要发达得多。我绞尽脑汁想弄清楚滚动条。如果我想到什么，我会发帖的。我设置了一个JSFIDLE来玩。应该帮助任何愿意尝试的人。我有一些想法。如果我弄明白了，我会发布一个答案@TruMan1，当您将鼠标悬停在滚动条上时，是希望滚动条，还是只需单击？这是一个JSFIDLE，它使用jQuery循环插件来实现与您正在使用的插件相同的效果。cycle插件比featureList要发达得多。我绞尽脑汁想弄清楚滚动条。如果我想到了什么，我会发帖的。。。我认为这根本不是一个有用的实现。如果用户想点击任何一个，而不仅仅是当前可见的，那该怎么办？你仍然可以点击其中任何一个，他们会集中注意力，相信我，这很好。我测试过了，伙计，你只能点击可见的。我知道你只需点击底部，它就会滚动。而且，你的动画看起来不是很经典。尝试并找到一些方法来使用动画而不是淡入淡出？那会有点帮助。我只是不想花4个小时在上面，所以我尽可能快地做了。啊。。。我认为这根本不是一个有用的实现。如果用户想点击任何一个，而不仅仅是当前可见的，那该怎么办？你仍然可以点击其中任何一个，他们会集中注意力，相信我，这很好。我测试过了，伙计，你只能点击可见的。我知道你只需点击底部，它就会滚动。而且，你的动画看起来不是很经典。尝试并找到一些方法来使用动画而不是淡入淡出？那会有点帮助。我只是不想花4个小时在上面，所以我尽可能快地做了。嗯。。。你不能点击它们吗？哦，你点击箭头。你现在可以点击它们，当你的鼠标悬停在寻呼机上时，它不会滚动。当你点击顶部的箭头时，会发生一些奇怪的事情。哇，谢谢你！我喜欢你如何利用著名的cycle插件来实现这一点。太棒了！！我还把问题扩展到这里：嗯。。。你不能点击它们吗？哦，你点击箭头。你现在可以点击它们，当你的鼠标悬停在寻呼机上时，它不会滚动。当你点击顶部的箭头时，会发生一些奇怪的事情。哇，谢谢你！我喜欢你如何利用著名的cycle插件来实现这一点。太棒了！！我还把问题扩大到这里：