jQuery滑块-添加下一个和上一个按钮

好的，我使用了与定时器上的图像滑块相同的代码来循环列表项，效果非常好。现在，我想在此添加“下一步”和“上一步”按钮，以增加用户体验。我环顾了一下堆栈，尝试了一些方法，但似乎无法找到解决方案

首先是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>

---

这几乎奏效了！唯一的问题是变量“nextli”是静态的，它的值仅在DOM加载时确定。不是每次单击“下一步”按钮时。如何在每次单击时对“nextli”进行评估？

好的，各位找到了我自己的答案。根据JSLint的说法并不完美，但它几乎完全符合我的要求。 以下是我为感兴趣的人找到的答案：

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

（函数（$）{
$.fn.featureList=函数（选项）{
var tabs=$（这个）；
变量输出=$（options.output）；
新的jQuery.featureList（选项卡、输出、选项）；
归还这个；
};
//通过选项卡循环到下一个，并显示响应输出
$.featureList=函数（选项卡、输出、选项）{
功能幻灯片（下一页）{
if（typeof nextli==“未定义”）{
nextli=可见项+1；
nextli=nextli>=项目总数？0:nextli；
}
var futureli=nextli+1；
futureli=futureli>=项目总数？0:futureli；
var pastli=nextli-1；
pastli=pastli>=项目总数？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（'coorep'）.css({
zIndex:10
}).fadeOut（）；
output.filter（“：eq（+nextli+”）.addClass（'cooresp'）.css({
zIndex:15
}).fadeIn（函数（）{
可见项=下一项；
下一项=未来；
上一项=上一项；
});
}
功能预览幻灯片（下一页）{
if（typeof nextli==“未定义”）{
nextli=可见项-1；
nextli=nextli>=项目总数？（tabs.length-1）：nextli；
}
如果（（nextli<0））{
nextli=（tabs.length-1）；
}
var futureli=nextli+1；
futureli=futureli>=总项目数？（制表符长度-1）：futureli；
var pastli=nextli-1；
pastli=pastli>=项目总数？（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（'coorep'）.css({
zIndex:10
}).fadeOut（）；
output.filter（“：eq（+nextli+”）.addClass（'cooresp'）.css({
zIndex:15
}).fadeIn（函数（）{
可见项=下一项；
下一项=未来；
上一项=上一项；
});
}
var options=options |{}；
var total_items=tabs.length；
var visible_item=options.start_item|0；
var next_项=（可见_项+1）| 1；
var prev_item=（可见_item-1）| |（tabs.length-1）；
var next=$（“#功能#列表#next a”）；
var prev=$（“#功能#列表#prev a”）；
var mainIMG=$（“#输出li”）；
options.pause_on_hover=options.pause_on_hover | true；
options.transition|u interval=options.transition|u interval | 6000；
prev.pause_on_hover=prev.pause_on_hover | true；
next.pause_on_hover=next.pause_on_hover | true；
maiimg.pause_on_hover=maiimg.pause_on_hover | true；
output.hide（）.eq（可见项）.show（）；
tabs.eq（可见项）.addClass（'current'）；
选项卡。单击（函数（）{
if（$（this）.hasClass（'current'））{
返回false；
}
幻灯片（制表符索引（本））；
});
findCurrentli=函数（currentTag）{
var currentli=currentTag；
var nextli=currentli.parent（）.sibbins（）.next（'li'）.find（'a'）；
log（currentli.parent（）.sides（）.next（'li'）.find（'a'））；
幻灯片（制表符索引（下一页））；
};
上一次单击（功能（e）{
e、 预防默认值（）；
var prevli=$（“#tabs li a.previous”）；
var currentli=$（“#tabs li a.current”）；
var nextli=$（“#tabs li a.nextup”）；
控制台日志（prevli）；
currentli.addClass（'nextup'）；
currentli.parent（）；
prevslide（制表符索引（prevli））；
});
下一步。单击（函数（e）{
e、 预防默认值（）；
var prevli=$（“#tabs li a.previous”）；
var currentli=$（“#tabs li a.current”）；
var nextli=$（“#tabs li a.nextup”）；
currentli.addClass（'previous'）；
nextli.parent（）；
幻灯片（制表符索引（下一页））；
});
如果（options.transition\u interval>0）{
var timer=setInterval（函数（）{
幻灯片（）；
}，选项。转换间隔）；
if（options.pause|u on|u hover | prev.pause|u on|u hover | next.pause|u on|u hover | mainIMG.pause|u hover）{
tabs.mouseenter（函数（）{
清除间隔（计时器）；
}).mouseleave（函数（）{
清除间隔（计时器）；
定时器=设置间隔（functi
                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) );   
                });

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