如何解决如何修改此jQuery插件滑块的滚动和方向？
| 我发现了一个几乎可以满足我需要的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,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);
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;
}
解决方法
答案：jsFiddle：可滑动和滚动的功能框
特征：
随着时间推移滑动
单击下一个和上一个
支持大量幻灯片
平滑滚动
单击时移至项目
悬停时停止运动
易于扩展，因为它使用了循环插件。
在项目上花费的时间：4小时
,好的，没有花哨的滚动条或其他任何东西，但是它将遍历每个滚动条，使其升至最高索引。我花了很长时间使它正常工作。
您可以通过将其他项目添加到列表中进行测试。
/*
* 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,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);
div#feature_list
feature_list
ul
li
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。