文字循环轮播

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

 

posted @ 2017-09-07 09:42  乐莫乐兮新相知  阅读(251)  评论(0编辑  收藏  举报