同一個類的元素的計時器同時調用

最近遇到別人的一個需求,就是是類似中獎觀衆名單輪播的一個效果,會出現多次,需要寫通用的方法,學習到了簡單記錄下
在這裏插入圖片描述

<!-- 消息滾動輪播1 -->
<p class="title">最新報名客戶</p>
<div class="newsBox">
    <img src="images/fire.png" height="200" width="200"/>
    <div id="news" class="news">
        <ul style="margin-top:0!important">
            <li>
                <a href="">陳**</a><a href="">157****9518</a><a href="">2天前</a>
            </li>
            <li>
                <a href="">王**</a><a href="">151****3775</a><a href="">3天前</a>
            </li>
            <li>
                <a href="">張**</a><a href="">135****7296</a><a href="">30分鐘前</a>
            </li>
            <li>
                <a href="">林**</a><a href="">182****2433</a><a href="">1小時前</a>
            </li>
            <li>
                <a href="">朱**</a><a href="">137****3554</a><a href="">2天前</a>
            </li>
            <li>
                <a href="">於**</a><a href="">157****9518</a><a href="">3天前</a>
            </li>
        </ul>
    </div>
</div>

<!-- 消息滾動輪播 2-->
<p class="title">中間觀衆</p>
<div class="newsBox">
    <img src="images/fire.png" height="200" width="200"/>
    <div id="scroll1" class="news">
        <ul style="margin-top:0!important">
            <li>
                <a href="">陳**</a><a href="">157****9518</a><a href="">2天前</a>
            </li>
            <li>
                <a href="">王**</a><a href="">151****3775</a><a href="">3天前</a>
            </li>
            <li>
                <a href="">張**</a><a href="">135****7296</a><a href="">30分鐘前</a>
            </li>
            <li>
                <a href="">林**</a><a href="">182****2433</a><a href="">1小時前</a>
            </li>
            <li>
                <a href="">朱**</a><a href="">137****3554</a><a href="">2天前</a>
            </li>
            <li>
                <a href="">於**</a><a href="">157****9518</a><a href="">3天前</a>
            </li>
        </ul>
    </div>
</div>

 /* 消息滾動輪播 */
    function autoScroll(obj) {
        $(obj).find('ul').animate({
            marginTop: '-.60rem'
        }, 1000, function () {
            $(this).css({marginTop: "0px"});
            //要對應到操作元素dom下的ul
            var _li = $(obj).find("ul li");
            var _clone =_li.first().clone();
            _li.last().after(_clone);
            _li.first().remove();
        })
    }

    $(function () {
        // setInterval('autoScroll("#news")', 2000);
        setInterval(function () {
            $(".news").each(function () {
                // console.log($(this))
                autoScroll($(this));

            })
        }, 2000)
    })

數據是靜態的死數據。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章