仿 騰訊新聞快訊 --無縫滾動

//無縫滾動
        function AutoScroll(obj) {
            var autoScrollTimer=null,timer=null;
            timer=setTimeout(function(){
                move();
            },3000);
            function move(){
                clearTime(autoScrollTimer);
                var liLen= $(obj).find('li').length;
                if(liLen === 1){//此處處理只有一條數據時 跳動效果
                    $(obj).find("ul:first").append($(obj).find('li').eq(0).clone())
                }
                $(obj).find("ul:first").animate({
                    marginTop: "-25px"
                }, 500, function() {
                    $(this).css({
                        marginTop: "0px"
                    }).find("li:first").appendTo(this);
                });
                autoScrollTimer=window.setTimeout(move,3000);
            }
            function clearTime(time){
                clearTimeout(time);
                time=null;
            }
            $(obj).find('li').hover(function(){
                clearTime(autoScrollTimer);
            },function(){
                move()
            })
        }

 $(function(){
            //無縫滾動
            $(document).ready(function() {
                AutoScroll("#jvsNotice")//調用
            });
}）

<div class="jvsNotice" id="jvsNotice">
    <ul>
        <li><a href="#">公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1</a></li>
        <li><a href="#">公告3公告3公告3公告3</a></li>
        <li><a href="#">公告4公告4公告4公告4</a></li>
        <li><a href="#">公告5公告5</a></li>
        <li><a href="#">公告6公告6</a></li>
        <li><a href="#">公告7公告7公告7</a></li>
        <li><a href="#">公告8公告8公告8公告8</a></li>
    </ul>
</div>

*{margin:0;padding:0;}
          
  ul,ol,dl{
            list-style: none;
        }
        .jvsNotice {
            height: 25px;
            line-height: 25px;
            border: #ccc 1px solid;
            overflow: hidden;
        }
        .jvsNotice>ul{
            padding-left: 0;
            overflow: hidden;
        }
        .jvsNotice li {
            height: 25px;
            padding-left: 10px;
            text-align: center;
            white-space: nowrap;
        }