屏幕中公告滾動 新聞滾動 音樂滾動 html js寫法（以公告滾動爲例）

歷史公告

<!--公告-->
   <div class="live_corps_news clearfix right">
       <div id="scroll_news">
          <ul id="importData" class="live_corps_news_list clearfix">
           <li style="font-size: 16px;color: #757575;">暫無公告</li>
           <li style="font-size: 16px;color: #757575;">暫無公告</li>
       </ul>
       </div>
    
    <div class="live_corps_news_ctrol">
    </div>
    <div class="live_corps_news_list_non" style="display: none;">
       <span class="list_non_sp">歷史公告</span>
       <ul id="importDataAll" class="clearfix">
         
     </ul>
    </div>
</div>

js執行

<script>

//公告滾動
var scrollIndex = 0;
var scrollTimer = null;
var flag = true;
function priceScroll_f() {
    clearInterval(scrollTimer);
    var ul = $("#importData");
    var li = ul.children("li");

    function run() {
        if (scrollIndex >= li.length / 2) {
            ul.css({top: 0});
            scrollIndex = 1;
            ul.stop().animate({top: -scrollIndex * 43}, 200);
        }
        else {
            scrollIndex++;

            ul.stop().animate({top: -scrollIndex * 43}, 200);
        }
    }

    scrollTimer = setInterval(run, 3000);
}

$(document).on("mouseover", "#importData li", function () {
    clearInterval(scrollTimer);
});
$(document).on("mouseout", "#importData li", function () {
    priceScroll_f();
});

</script>