javascript - jQuery fadeIn 使用 onClick 一次一个元素

Question

我正在尝试创建一个非常基本的幻灯片，用户可以单击后退或下一个箭头来查看上一个或下一个元素。我发现了各种与此类似的问题，但它们是自动转换的；我正在寻找点击时一次切换一个的元素。如果单击“下一步”，则应前进，如果单击“后退”，则应后退。如果有人从第一次点击返回，则应该显示最后一次；如果他们在最后一个时单击“下一步”，它将返回到第一个。

我当前的代码循环多个元素。我是新手，所以我很难弄清楚如何让它一次只运行一个。这必须与 jQuery 1.3.2 一起使用，因为我使用的网站已加载该库，但我们无法更新它。

它不一定是 LI，也可以是 div，如果出于某种原因更好的话。任何有关如何实现的建议都将受到赞赏。

这是一个link to my fiddle ，但基本的 HTML 是:

        <div id="arrow-next"></div>
        <div id="arrow-back"></div>

        <ul class="services">
            <li style="display: block;">slide 1</li>
            <li>slide 2</li>
            <li>slide 3</li>
            <li>slide 4</li>
            <li>slide 5</li>
            <li>slide 6</li>
        </ul>

CSS:

        ul.services li{
        height: 500px;
        width: 980px;
        border: 1px solid #ccc;
        text-align: center;
        list-style-type: none;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background-color: #fff;
        }

        ul.services {
        display: inline-block;
        position: relative;
        }

jquery:

        $(document).ready(function() {
            $("#arrow-next").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).next().fadeIn('slow');
                });
            });
            $("#arrow-back").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).prev().fadeIn('slow');
                });
            });
        });

预先感谢您提供的任何帮助。我发现this post并尝试像这样更新，但它不会改变我已有的代码所发生的情况。

            $(document).ready(function() {
                $("#arrow-next").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).next().fadeIn('slow', function(){
                        $(this).prev().fadeOut('slow');
                    });
                    });
                });
                $("#arrow-back").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).prev().fadeIn('slow');
                    });
                });
            });

Answer 1

类似这样的东西吗？

$(document).ready(function () {
    $("#arrow-next").click(function () {
        $('ul.services li:visible').fadeOut(function () { //select only the visible element
            var $next = $(this).next(); //get the next element
            var $target = $next.length ? $next : $('ul.services li:first'); //if there is no next then switch the pointer to point to the first one.
            $target.stop(true,true).fadeIn('slow'); //now fadeIn the target element.
        });
    });
    $("#arrow-back").click(function () {
        $('ul.services li:visible').fadeOut(function () {
            var $prev = $(this).prev(); //get the prev element
            var $target = $prev.length ? $prev : $('ul.services li:last');//if there is no next then switch the pointer to point to the last one.
            $target.stop(true,true).fadeIn('slow');//now fadeIn the target element.
        });
    });
});

<强> Fiddle