文字循環輪播

<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>
相關文章
相關標籤/搜索