Question

嗨朋友我有很多<li>我希望在一秒钟之后一次显示一个<li>，其中<li>应该成为display:none而下一个<li>应该成为display:block

目标是显示一个<li> @一次序列，然后休息<li> sholud隐藏

请帮帮我们

我试过这个

HTML

<div id="dvContent">    
<ul>
    <li><img src="640/WaterSPLASH.2.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.3.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.4.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.5.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.6.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.7.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.8.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.9.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.10.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.11.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.12.png" width="640" height="1136" alt=" " /></li>
    <li><img src="640/WaterSPLASH.13.png" width="640" height="1136" alt=" " /></li>
</ul>

</div>

CSS

#dvContent ul{position:relative;}
#dvContent ul li{position:absolute; left:0; top:0; display:none;}

SCRIPT

$(document).ready(function(e) {      
var len = $('#dvContent ul li').length;
var i;
        for(i = 0; i < len; i++)
        {
            setInterval(function(){             
            $('#dvContent ul li').eq(i).siblings('li').css('display','none');
            $('#dvContent ul li').eq(i).css('display','block');
        }, 1000);       
    }
});

Answer 1

尝试不使用for loop这样的

$(document).ready(function(e) {

    var i = 0;
    var len = $('#dvContent ul li').length;
    var timeLoop;

    timeLoop = setInterval(function(){             
                $('#dvContent ul li').hide(); // hide all the li elements
                $('#dvContent ul li').eq(i).show(); // show the current li
                i = i + 1;
                if(i > len){
                     clearInterval(timeLoop);
                     i = 0;
                }
       }, 1000);

});

Answer 2

我会使用此代码来确保函数调用自身

function loop(index) {
        setInterval(function(){             
            $('#dvContent ul li').eq(index).siblings('li').css('display','none');
            $('#dvContent ul li').eq(index).css('display','block');
            loop(index+1);
        }, 1000);

Answer 3

您可以使用递归setTimeout。

代码：

$(document).ready(function (e) {
    var len = $('#dvContent ul li').length;

    var i = len;
    (function k() {
        $('#dvContent ul li').hide();
        $('#dvContent ul li').eq(len-i).show();
        if (--i) {
            setTimeout(k, 1000);
        }

    })()

});

演示：http://jsfiddle.net/IrvinDominin/2TfQ4/

使用setInterval（）</li>一次显示一个<li>

3 个答案: