首页 > 代码库 > js简单跑马灯案例
js简单跑马灯案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title> <style type="text/css"> *{ margin: 0; padding: 0; } #bian{ width: 300px; height: 300px; margin:0 auto; } .deng{ width: 30px; height: 30px; float: left; position: relative; top: 49%; left: 20%; border-radius:50px; } </style></head><body> <div id="bian"> <div class="deng" name="deng"></div> <div class="deng" name="deng"></div> <div class="deng" name="deng"></div> <div class="deng" name="deng"></div> <div class="deng" name="deng"></div> <div class="deng" name="deng"></div> </div></body><script type="text/javascript"> //获取所有元素 deng=document.getElementsByName(‘deng‘); bian=document.getElementById(‘bian‘); //设置颜色数组 list=["red","blue","green","yellow","orange","purple"]; //循环给div赋上颜色 for (var i = 0; i < deng.length; i++) { deng[i].style.backgroundColor=list[i]; } //定时器 setInterval(function(){ //把第一个节点插入当前节点的上一个节点之前 bian.insertBefore(deng[0],deng[0].previousSibling); },10); </script></html>
js简单跑马灯案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。