Question

我发现了一个jQuery滑块插件，几乎可以满足我的需求。我需要更改选项卡，使其位于右侧（通过添加选项）。此外，我想添加滚动到选项卡，以防有超过3个选项卡（也通过一个选项）。我试图让它看起来像是一个艺术家模拟：

http://i.stack.imgur.com/nR8RY.png

这是我尝试使用下面的代码修改的脚本： http://jqueryglobe.com/labs/feature_list/

/*
 * 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;  
            });
        }

        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   || 5000;

        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);

这是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;    
}

任何人都可以帮忙吗？

Answer 1

答案：jsFiddle: features box that slides and scrolls

功能

随着时间滑动

点击下一个和上一个

支持大量幻灯片

平滑滚动

点击
移至项目
悬停时停止移动

轻松扩展，因为它使用循环插件。

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

Answer 2

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

/*
 * 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);

Answer 3

要增加框的高度，只需更改div#feature_list的高度，添加其他项只需在li内的ul内添加其他feature_list项}

如何修改这个jQuery插件滑块滚动和方向？

3 个答案: