效果图展示：
源码查看
【功能说明】
利用insertbefore制作简单的循环插空效果
【html代码说明】
1 2 3 4 5 6
【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);
好了，以上就是本文的全部内容，代码很简单吧，相信大家都可以看得懂，需要的朋友可以参考下本文，希望大家喜欢。