基于insertBefore制作简单的循环插空效果

 【功能说明】

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

【HTML代码说明】

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

【CSS代码说明】

.in{

height:20px;

line-height:20px;

width:20px;

background-color:blue;

text-align:center;

color:white;

}

【JS代码说明】

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

好了，以上就是本文的全部内容，代码很简单吧，相信大家都可以看得懂，需要的朋友可以参考下本文，希望大家喜欢。