Javascript jQuery：幻灯片之间的非线性时间间隔

我在网页上有一个小滑块。现在我需要为每一张幻灯片留出一个时间间隔。 首先，这里是滑块的代码：

<script type="text/javascript">
    jQuery(document).ready(function(){
        function getData(){
            $.get( "<some url>", function( data ) {
                $( "section ul" ).html( data );
                $('section ul li:first-child').fadeIn(1000);
            })
        };

        function moveNext(){
            $('section ul li:first-child').fadeOut(1000, function(){
                $('section ul li:first-child').appendTo('section ul');
                $('section ul li:first-child').fadeIn(1000);
            });
        };

    getData();

    setInterval(function(){
        moveNext();
        moveNextFooter();
    }, 10000);
</script>

因此，当前的中断代码如下所示：

<ul>
    <li rel="2000">Slide 1</li>
    <li rel="5000">Slide 2</li>
</ul>

<script type="text/javascript">
    jQuery(document).ready(function(){
        function getData(){
            $.get( "<some url>", function( data ) {
                $( "section ul" ).html( data );
                $('section ul li:first-child').fadeIn(1000);
            })
        };

        function moveNext(){
            $('section ul li:first-child').fadeOut(1000, function(){
            $('section ul li:first-child').appendTo('section ul');
            $('section ul li:first-child').fadeIn(1000);
            window.setTimeout(moveNext(), parseInt($('section ul li:first-child').attr('rel')));
        });
    };

    getData();
</script>

<section>
    <ul>
        <li rel="2000">Slide 1</li>
        <li rel="5000">Slide 2</li>
    </ul>
</section>

---

但是它不起作用。

多亏了黄主义，我找到了答案

这是一件我没有看到的简单的事情。我从未调用moveNext函数，因此它从未启动。正确的代码如下：

<script type="text/javascript">
    jQuery(document).ready(function(){
        function getData(){
            $.get( "<some url>", function( data ) {
                $( "section ul" ).html( data );
                $('section ul li:first-child').fadeIn(1000);
                window.setTimeout(moveNext, parseInt($('section ul li:first-child').attr('rel')));
            })
        };

        function moveNext(){
            $('section ul li:first-child').fadeOut(1000, function(){
                $('section ul li:first-child').appendTo('section ul');
                $('section ul li:first-child').fadeIn(1000);
                window.setTimeout(moveNext, parseInt($('section ul li:first-child').attr('rel')));
            });
    };

    getData();
</script>

<section>
    <ul>
        <li rel="2000">Slide 1</li>
        <li rel="5000">Slide 2</li>
    </ul>
</section>

---

您可以自己使用它=

window.setTimeoutmoveNext。。。你能描述一下什么是不起作用的吗？好吧，它确实起到了作用，它只是不是你想要的不同而已。请详细描述什么不起作用，因为它不调用moveNext函数。所以我认为问题是，我在ajax请求之后加载TimeInterval。你能发布当前被破坏的代码吗。我很困惑，你现在的最后一个代码是什么，它不起作用坏掉的部分应该是这个：window.setTimeoutmoveNext，parseInt$'section ul li:first child'.attr'rel'；我认为问题在于这个部分：parseInt$'section ul li:first child'.attr'rel'

<script type="text/javascript">
    jQuery(document).ready(function(){
        function getData(){
            $.get( "<some url>", function( data ) {
                $( "section ul" ).html( data );
                $('section ul li:first-child').fadeIn(1000);
                window.setTimeout(moveNext, parseInt($('section ul li:first-child').attr('rel')));
            })
        };

        function moveNext(){
            $('section ul li:first-child').fadeOut(1000, function(){
                $('section ul li:first-child').appendTo('section ul');
                $('section ul li:first-child').fadeIn(1000);
                window.setTimeout(moveNext, parseInt($('section ul li:first-child').attr('rel')));
            });
    };

    getData();
</script>

<section>
    <ul>
        <li rel="2000">Slide 1</li>
        <li rel="5000">Slide 2</li>
    </ul>
</section>