公告循环向上滚动

html:

 

<div class="scroll-wrap" style="height: 16px; overflow: hidden;">
    <ul class="scroll-con fn-left" style="margin-top: 0px;">
                <li style="height: 16px; line-height: 16px; overflow: hidden;">
                    <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家1</a>
                </li>
                <li style="height: 16px; line-height: 16px; overflow: hidden;">
                    <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家2</a>
                </li>
                <li style="height: 16px; line-height: 16px; overflow: hidden;">
                    <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家3</a>
                </li>
                <li style="height: 16px; line-height: 16px; overflow: hidden;">
                    <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家4</a>
                </li>


    </ul>
</div>

js:

 

引入jquery文件cdn

 

<script src="http://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script><script>
    /*公告滚动*/
    $(function(){
        var len = $(".scroll-con li").length;
        console.log(len);
        if(len > 1){
            textRoll=function(){
                $(".scroll-wrap").find(".scroll-con").animate({
                    marginTop : "-16px"
                },500,function(){
                    $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
                });
            };
            var roll= setInterval('textRoll()',1000);
            $(".scroll-con li").mouseenter(function() {
                clearInterval(roll);
            }).mouseout(function(){
                clearInterval(roll);
                roll= setInterval('textRoll()',1000);
            });
        }
    })
</script>