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

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

http://sofzh.miximages.com/javascript/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：幻灯片和滚动function框

特征：

• 幻灯片随着时间的推移
• 单击下一个和上一个
• 支持大量幻灯片
• 平滑滚动
• 点击后移动到项目
• hover时停止移动
• 由于它使用了循环插件，因此可以轻松扩展。

花在项目上的时间： 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的高度并添加其他项，只需在feature_list的ul添加一个额外的li项。