文字循环平滑轮播 

<style>
    .liuyan{
      width: 651px;
      padding: 10px 20px;
      border: 1px solid #3c5791;
      margin-left: 250px;
      text-align: left;
      margin-top: 99px;
      height: 221px;
      overflow: hidden;
      font-size: 20px;
      background-color: #cfd2ff;
      position: relative;
      .w1{
        color: #035307;margin-right: 5px;
      }
      .w2{color: #7f2020}
      .w3{color: #3c5791}
      ul{
        font-size: 14px;
        width:651px;
        li{padding: 5px 0;border-bottom: 1px dotted #d6d6d6}
      }

    }
</style>
<html>

<div class="liuyan" id="demo">
            <div id="demo-wrap">
                <div id="demo1">
                    <ul id="js-list">
                        <li><span class="w1">纪元32服</span><span class="w2">放牛弓箭手</span>
                            <span class="w3">选我选我，我是全游戏最可爱的人。</span>
                        </li>
                        <li><span class="w1">应用宝483服</span><span class="w2">斯玛特 </span>
                            <span class="w3">《永恒纪元》让我爱上游戏，并且是我第一个游戏</span>
                        </li>
                       
                        <li><span class="w1">永恒284服</span><span class="w2">无名氏 </span>
                            <span class="w3">希望永恒纪元越办越好，翅膀炫炫的，坐骑酷酷的，策划师帅帅的，小布林美美哒</span>
                        </li>
                        <li><span class="w1">小米42服</span><span class="w2">肩上能站人</span>
                            <span class="w3">一个游戏妹子多了，人就多了。我为妹子袋盐</span>
                        </li>
                        <li><span class="w1">天使1472服</span><span class="w2">内裤上有熊</span>
                            <span class="w3">古代也有花木兰从军呢，什么时候给我整个女战士出来呢。</span>
                        </li>
                    </ul>
                    </div>
                <div id="demo2"></div>
                </div>
        </div>
<script>
    //获取id=demo,id=demo1,id=demo2的元素对象，并把id=demo1的内容赋值给id=demo2
    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>

</html>

 

posted @ 2017-05-03 16:35  乐莫乐兮新相知  阅读(194)  评论(0)    收藏  举报