好的，所以我使用相同的代码将列表项循环为计时器上的图像滑块，它运行良好。现在我想为此添加“Next”和“Prev”按钮以增加用户体验。我已经看了一下堆栈，尝试了一些事情，似乎无法找到解决方案。
首先是HTML代码：
<div class="container">
<div class="tabs">
<nav>
<ul id="tabs">
<li><a href="javascript:;" class='current'>Tab1</a></li>
<li><a href="javascript:;">Tab1</a></li>
<li><a href="javascript:;">Tab2</a></li>
<li><a href="javascript:;">Tab3</a></li>
<li><a href="javascript:;">Tab4</a></li>
<li><a href="javascript:;">Tab5</a></li>
<li><a href="javascript:;">Tab6</a></li>
</ul>
</nav>
<!-- end .tabs -->
</div>
<div class="content">
<div id="feature_list">
<div id="prev" class="arrows prev"><a href="#">PREV</a></div>
<ul id="output">
<li><a href="#" target="_parent" class="corresp">Output1</a></li>
<li><a href="#" target="_parent">Output2</a></li>
<li><a href="#" target="_parent">Output3</a></li>
<li><a href="#" target="_parent">Output4</a></li>
<li><a href="#" target="_parent">Output5</a></li>
<li><a href="#" target="_parent">Output6</a></li>
<li><a href="#" target="_parent">Output7</a></li>
</ul>
<div id="next" class="arrows next"><a href="#">NEXT</a></div>
</div>
<!-- end .content -->
</div>
现在确定jQuery是下一个。但首先我应该解释一下，代码循环遍历列表，id为“tabs”，从第一个添加并删除每个锚标记上的“current”类开始。然后，它会在“输出”列表中找到相应的项目并显示该输出。现在这里是代码：
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
//Loops through tab to next and displays cooresponding output
$.featureList = function(tabs, output, options) {
function slide(nextli) {
if (typeof nextli == "undefined") {
nextli = visible_item + 1;
nextli = nextli >= total_items ? 0 : nextli;
prevli = visible_item - 1;
prevli = prevli >= total_items ? 0 : prevli;
}
tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');
output.stop(true, true).filter(":visible").removeClass('cooresp').css({zIndex:10}).fadeOut();
output.filter(":eq(" + nextli + ")").addClass('cooresp').css({zIndex:15}).fadeIn(function() {
visible_item = nextli;
});
}
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 || 4000;
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);
</script>
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 0
}
);
var next = $("#feature_list #next a");
var prev = $("#feature_list #prev a");
var tabs = $('#tabs li a');
next.click(function(){
var tabli = $('#tabs li a.current');
//var current = $('.selectoption li:visible');
var output = $("#output li.cooresp");
var currentli = $('#tabs li a.current');
output.stop(true, true).css({zIndex:10}).fadeOut();
output.prev().css({zIndex:15}).fadeIn(function() {
tabsli.prev('a').addClass('current');
});
});
prev.click(function(){
var tabli = $('#tabs li a.current');
//var current = $('.selectoption li:visible');
var output = $("#output li.cooresp");
var currentli = $('#tabs li a.current');
output.stop(true, true).css({zIndex:10}).fadeOut();
output.prev().css({zIndex:15}).fadeIn(function() {
tabli.stop(true, true).removeClass('current');
$('#tabs li a').prev().addClass('current');
});
});
});
</script>
我试图做的是，当有人点击“下一步”按钮时，会显示上一张图像。这是有效的（虽然它可能是一个圆形的方式）。尝试使用.prev和.next（）函数时的主要问题是我无法让当前的类向前或向后移动。我希望两个列表在各自的列表中始终保持相同的编号。如果'current'类在：first或：last，我希望它像在计时器上一样循环。
如果有人可以提供帮助，我将非常感激。如果您需要更多信息，请随便提出。提前谢谢！
修改
好的，所以我尝试取出next.click并将其放回到tabs.click下的主代码区：
next.click(function() {
currentli = $('a.current');
nextli = currentli.parent().siblings().next('li').find('a');
console.log(currentli.parent().siblings().next('li').find('a'));
slide( tabs.index(nextli) );
});
这个ALMOST有效！唯一的问题是变量'nextli'是静态的，它的值仅在DOM加载时确定。不是每次单击下一个按钮。如何在每次点击时评估“nextli”？
答案 0 :(得分：0)
(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
//Loops through tab to next and displays cooresponding output
$.featureList = function(tabs, output, options) {
function slide(nextli) {
if (typeof nextli == "undefined") {
nextli = visible_item + 1;
nextli = nextli >= total_items ? 0 : nextli;
}
var futureli = nextli + 1;
futureli = futureli >= total_items ? 0 : futureli;
var pastli = nextli - 1;
pastli = pastli >= total_items ? 0 : pastli;
tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');
tabs.removeClass('previous').filter(":eq(" + pastli + ")").addClass('previous');
tabs.removeClass('nextup').filter(":eq(" + futureli + ")").addClass('nextup');
output.stop(true, true).filter(":visible").removeClass('cooresp').css({
zIndex: 10
}).fadeOut();
output.filter(":eq(" + nextli + ")").addClass('cooresp').css({
zIndex: 15
}).fadeIn(function() {
visible_item = nextli;
next_item = futureli;
prev_item = pastli;
});
}
function prevslide(nextli) {
if (typeof nextli == "undefined") {
nextli = visible_item - 1;
nextli = nextli >= total_items ? (tabs.length -1) : nextli;
}
if ((nextli < 0)) {
nextli = (tabs.length -1);
}
var futureli = nextli + 1;
futureli = futureli >= total_items ? (tabs.length -1) : futureli;
var pastli = nextli - 1;
pastli = pastli >= total_items ? (tabs.length -1) : pastli;
tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');
tabs.removeClass('previous').filter(":eq(" + pastli + ")").addClass('previous');
tabs.removeClass('nextup').filter(":eq(" + futureli + ")").addClass('nextup');
output.stop(true, true).filter(":visible").removeClass('cooresp').css({
zIndex: 10
}).fadeOut();
output.filter(":eq(" + nextli + ")").addClass('cooresp').css({
zIndex: 15
}).fadeIn(function() {
visible_item = nextli;
next_item = futureli;
prev_item = pastli;
});
}
var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;
var next_item = (visible_item + 1) || 1;
var prev_item = (visible_item - 1) || (tabs.length -1);
var next = $('#feature_list #next a');
var prev = $('#feature_list #prev a');
var mainIMG = $("#output li");
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 6000;
prev.pause_on_hover = prev.pause_on_hover || true;
next.pause_on_hover = next.pause_on_hover || true;
mainIMG.pause_on_hover = mainIMG.pause_on_hover || true;
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));
});
findCurrentli = function(currentTag) {
var currentli = currentTag;
var nextli = currentli.parent().siblings().next('li').find('a');
console.log(currentli.parent().siblings().next('li').find('a'));
slide(tabs.index(nextli));
};
prev.click(function(e) {
e.preventDefault();
var prevli = $('#tabs li a.previous');
var currentli = $('#tabs li a.current');
var nextli = $('#tabs li a.nextup');
console.log(prevli);
currentli.addClass('nextup');
currentli.parent().siblings().prev('li a').addClass('previous');
prevslide(tabs.index(prevli));
});
next.click(function(e) {
e.preventDefault();
var prevli = $('#tabs li a.previous');
var currentli = $('#tabs li a.current');
var nextli = $('#tabs li a.nextup');
currentli.addClass('previous');
nextli.parent().siblings().next('li a').addClass('nextup');
slide(tabs.index(nextli));
});
if (options.transition_interval > 0) {
var timer = setInterval(function() {
slide();
}, options.transition_interval);
if (options.pause_on_hover || prev.pause_on_hover || next.pause_on_hover || mainIMG.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval(timer);
}).mouseleave(function() {
clearInterval(timer);
timer = setInterval(function() {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);
基本上'下一步'按钮搭载略微改变的slide（）函数。对于'Prev'按钮，我制作了slide（）的副本，并将其命名为prevslide（）。新函数所做的不是找到下一个列表项，而是找到前一个列表项并将“当前”类添加到锚标记中。我还必须添加'previous'和'nextup'类，因为在Firefox中，点击其中一个标签后，'current'类的CSS在计时器循环之后才会消失。如果你能告诉我如何让pause_on_hover在'Next'和＆amp; 'PREV'按钮请评论。