<div class="scroll1" id="demo"> <div id="demo1"> <ul id="js-list" class="js-lunbo"> <li><span>王国1</span><span>2017-09-16</span><span>10:00:00</span></li> <li><span>王国2</span><span>2017-09-16</span><span>10:00:00</span></li> <li><span>王国3</span><span>2017-09-16</span><span>10:00:00</span></li> <li><span>王国4</span><span>2017-09-16</span><span>10:00:00</span></li> <li><span>王国5</span><span>2017-09-16</span><span>10:00:00</span></li> <li><span>王国6</span><span>2017-09-16</span><span>10:00:00</span></li> <li><span>王国7</span><span>2017-09-16</span><span>10:00:00</span></li> </ul> </div> <ul id="demo2"></ul> </div>
<script> var demo=document.getElementById("demo"); var demo1=document.getElementById("demo1"); var demo2=document.getElementById("demo2"); demo2.innerHTML=demo1.innerHTML; //给demo1,demo2加相同的高度 demo1.style.height=document.getElementById("js-list").offsetHeight+"px"; demo2.style.height=demo1.offsetHeight+"px"; //定时器,每隔50毫秒调用一次scrollup()函数,来实现文字的滚动 var timer=window.setInterval("scrollup()",50); //定义函数 function scrollup() { //若是demo滚上去的高度大于demo的高度,从新给demo赋值从0再开始滑动 if(parseFloat(demo.scrollTop)>=document.getElementById("js-list").offsetHeight) { demo.scrollTop=0; }else { demo.scrollTop++; } }</script>