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

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

我目前拥有的代码在多个元素之间循环。我是新来的，所以我很难弄清楚如何一次只让它走一次。这必须与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');
                    });
                });
            });

最佳答案

这样的东西？

$(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

关于javascript - jQuery一次使用onClick的fadeIn元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18836610/