js如何每1秒li循环加单独的class？

Question

1. 每一秒给li增加单独的class="active",其它的为空。

2. 等一秒过去后，第一个li为空，第二个li增加class="active",剩下如此类推。

HTML：

<ul id="new">

    <li><img src="img/01.jpg" ></li>

    <li><img src="img/02.jpg" ></li>

    <li><img src="img/03.jpg" ></li>

    <li><img src="img/04.jpg" ></li>

    <li><img src="img/05.jpg" ></li>

    <li><img src="img/06.jpg" ></li>

</ul>

js:

    var temp = document.getElementById("new");

    var li = temp.getElementsByTagName("li");

    setInterval(function(){           

    for(var i = 0; i<li.length; i++){

                           

                 // 如何判断？

                 li[i].className="active";     

                       

    //1秒                   

    },1000);

          

Answer 1

在你的基础上改了一下&nbsp; &nbsp; var temp = document.getElementById("new");&nbsp; &nbsp; var li = temp.getElementsByTagName("li");&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; li[i].className = "active";&nbsp; &nbsp; &nbsp; &nbsp; if(i-1>=0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li[i-1].className = "";&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li[li.length-1].className = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; if(i==li.length){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i=0&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; },1000);