新闻单条的滚动

html

<div class="list" id="kuaixun">
    <ul class="clearfix" id="kxList1">
        <li>这是第一条</li>
        <li>这是第二条</li>
        <li>这是第三条</li>
    </ul>
    <ul class="clearfix" id="kxList2"></ul>
</div>

js

    $(function(){
        var speed = 10;//滚动速度
        var rows = 24;//每行高度
        var stim = 200;//停留时间倍数 * speed
        var stops = 0;//初始化值，不管
        var kuaixun = document.getElementById('kuaixun');
        var list1 = document.getElementById('kxList1');
        var list2 = document.getElementById('kxList2');
        list2.innerHTML = list1.innerHTML;//  复制内容
        function gundong(){
        if(kuaixun.scrollTop%rows==0 && stops<=stim){
          stops++;
          return;
        }
        stops = 0;
        if(list2.offsetTop-kuaixun.scrollTop <= 0){
          kuaixun.scrollTop-=list1.offsetHeight;
        }else{
          kuaixun.scrollTop++;
        }
    }
    setInterval(gundong,speed);
//  $('#kuaixun').on('mouseover',function(){
//      clearInterval(timer2);
//  }).on('mouseout',function(){
//      timer2 = setInterval(gundong,speed)
//  });
    })