Question

我在网页上有一个小滑块。现在我需要每个幻灯片另一个时间间隔。首先是滑块的代码：

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

现在有一部分我想改变setInterval。 intervall的持续时间来自幻灯片本身......我想到了这样的事情：

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

_

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')));
    });
};

所以当前破碎的代码是这样的：

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

但它不起作用。

Answer 1

感谢黄教，我找到了答案。

这是一件我没看到的简单事情。我从来没有调用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>

随意使用它=）

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

1 个答案: