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

Question

好的，我已经使用相同的代码来循环列表项作为计时器上的图像滑块，并且效果很好。现在我想添加“下一步”和“上一步”按钮以增加用户体验。我查看了堆栈，尝试了一些方法，但似乎无法找到解决方案。

首先是 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“选项卡”的列表，从第一个添加和删除每个锚标记上的“当前”类开始。然后它在“输出”列表中找到相应的项目并显示该输出。现在这是代码：

<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() 函数时，我无法让当前类向后或向前移动。我希望两个列表在各自的列表中始终具有相同的数字。如果“当前”类位于 :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) );   
                });

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

Answer 1

好的，大家找到了我自己的答案。根据 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);

基本上“下一步”按钮搭载在稍微改变的幻灯片（）函数上。对于“上一页”按钮，我复制了 Slide() 并将其命名为 prevslide()。新函数所做的不是查找​​下一个列表项，而是查找前一个列表项并将“当前”类添加到锚标记。我还必须添加“上一个”和“下一个”类，因为在 Firefox 中，单击其中一个选项卡后，“当前”类的 CSS 直到计时器循环经过它才消失。如果你能告诉我如何让pause_on_hover在“下一个”和“下一个”上工作？ “PREV”按钮请发表评论。