jQuery網站新聞公告上下滾動自動輪播代碼

 

【今日頭條】

         
          <div class="notice_active">
<ul>
<li >
<a>111111111111111</a>                

</li>
<li >
<a>222222222222</a>                

</li>
<li>
<a>3333333333333333</a>                

</li>

</ul>   

</div>

 <style>
            .notice_active {
               float: left;
               width: 55%;
               height: 50px;  /*此高要等於父高*/
               padding: 0;
               overflow: hidden;
               position: relative;
               margin-left:16%;
           }
 </style>

 <script>
            var time = setInterval(function () {
                t();}, 5000)


            function t() {
                var he = $(".notice_active>ul>li").height();//找到li高
                $(".notice_active>ul>li").eq(0).appendTo($(".notice_active>ul")); //複製第一個到最後一個
                $(".notice_active>ul").animate({
                    "marginTop": "-" + he
                }, 500, function () {
                    $(".notice_active>ul").css({
                        "marginTop": 0
                    })
                })
            }
    </script>