效果图展示：
源码查看
【功能说明】
利用insertBefore制作简单的循环插空效果
【HTML代码说明】
<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>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);
好了，以上就是本文的全部内容，代码很简单吧，相信大家都可以看得懂，需要的朋友可以参考下本文，希望大家喜欢。
【基于insertBefore制作简单的循环插空效果】相关文章：
★ JavaScript基于setTimeout实现计数的方法