利用insertBefore制作简单的循环插空效果【jsDEMO】

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
    <li class="in">6</li>        
</ul>

.in{
    height: 20px;
    line-height: 20px;
    width: 20px;
    background-color: blue;
    text-align: center;
    color: white;
}

var oList = document.getElementById(‘list‘);
//新增一个li元素
var oAdd = document.createElement(‘li‘);
//设置新增元素的css样式
oAdd.className = "in";
oAdd.style.cssText = ‘background-color:red;border-radius:50%‘;
//添加到oList中
oList.insertBefore(oAdd,null);
var num = -1;
var max = oList.children.length;
function incrementNumber(){
    num++;
    //oList.getElementsByTagName(‘li‘)[max]相当于null，所以不报错
    oList.insertBefore(oAdd,oList.getElementsByTagName(‘li‘)[num]);    
    if(num == max){
        num = -1;
    }    
    if(num == 0){
        num = 1;
    }
    setTimeout(incrementNumber,1000);

}
setTimeout(incrementNumber,1000);