內容循環滾動/內容一條一條顯示

<!--最新智能報價-->
            <div class="m-quote-newst">
                <p class="count" style="color:#777c7c;">今天已有<{$everyday+$todaytendersnum}>位業主發佈招標</p>
                <div class="quote-list" style="border:1px solid #ebebeb;background: #fff;">
                    <div class="list-tit" style="border-bottom: 1px solid #ebebeb;">
                        <span style="width:134px;color:#28c2b3;">城市</span>
                        <span style="width:134px;color:#28c2b3;">業主</span>
                        <span style="width:134px;color:#28c2b3;">面積</span>
                        <span style="width:134px;color:#28c2b3;">預算</span>
                        <span style="width:134px;color:#28c2b3;">日期</span>
                    </div>
                    <ul id="marquee1">
                        <{foreach $tendersitemstwo as $item}>
                        <li>
                            <span style="width:134px;color:#000000;"><{$item.city_name}></span>
                            <span style="width:134px;color:#000000;"><{$item.contact|default:"--"}></span>
                            <span style="width:134px;color:#000000;"><{$item.house_mj}>㎡</span>
                            <span style="width:134px;color:#000000;"><{$item.zongyusuan}></span>
                            <span style="width:134px;color:#000000;"><{$item.dateline|format:"m-d"}></span>
                        </li>
                        <{/foreach}>
                    </ul>
                </div>
            </div>
            <!--最新智能報價 end-->

滾動js：

 //marquee
    function startmarquee(lh,speed,delay,id,slip) {
        var t;
        var p = false;
        var o = document.getElementById(id);
        if (o == null) return false;
        o.innerHTML += o.innerHTML;
        o.onmouseover = function () {
            p = true;
        };
        o.onmouseout = function () {
            p = false;
        };
        o.scrollTop = 0;
        function start() {
            t = setInterval(scrolling, speed);
            if (!p) {
                o.scrollTop += slip;
            } else {
                o.scrollTop == o.scrollTop;
            }
        }

        function scrolling() {
            if (o.scrollTop % lh != 0) {
                o.scrollTop += slip;
                if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
            } else {
                clearInterval(t);
                setTimeout(start, delay);
            }
        }
        setTimeout(start, delay);
    };
    //發佈招標內容循環滾動
    if($('#marquee1')['0']){
        startmarquee(44,100,0,"marquee1",4);
    }
    //簽單快報滾動
    if($('#bulletin-con')['0']){
        startmarquee(44,100,0,"bulletin-con",4);
    }

<!--簽單快報-->
        <div class="m-bulletin">
            <div class="tit">最新動態</div>
            <div class="bulletin-con" id="bulletin-con">
                <ul id="bubbleScroll">
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="qiandan_title">恭喜簽單</div>
                            <div class="qiandan_list">慶祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功簽下業主<{$item.contact}>的裝修訂單！</div>
                        </li>
                        <li>
                            <div class="welcome_title">歡迎加入</div>
                            <div class="welcome_list"><span style="font-weight: 700;">廈門有家裝飾</span></br>入駐有其屋(<span style="color:rgb(40, 200, 180);">廈門有其屋</span>)</div>
                        </li>
                </ul>
            </div>
            <a href="http://www.youqiwu.net.cn/pc_zhaoshang1708/" target="_blank" class="metoo">我也要出如今這裏</a>
        </div>
        <!--簽單快報 end-->

 

一條一條顯示js:

 //簽單快報滾動（最第一版）start
    // function autoScrollBubble(){
    //     var conHeight = $('.bulletin-con').height();  //獲取包裹層的高度，若列表的高度超過包裹層的高度，則改成底部對齊
    //     var $ul = $('#bubbleScroll');
    //     $ul.show();
    //     var bubbleLength = $ul.find('li').length;
    //     var bubbleArr = [];
    //     for(var i = 0; i < bubbleLength; i++){  //將列表的元素加入數組
    //         bubbleArr.push($ul.find('li').eq(i));
    //     }
    //     $ul.html('');
    //     var delayTime = 3000;
    //     var appendIndex = 0;
    //     function appendBubble(){  //將li元素添加到列表函數
    //         $ul.append(bubbleArr[appendIndex]);
    //         var ulHeight = $ul.height();
    //         if(ulHeight >= conHeight){
    //             $ul.css({'top':'auto','bottom':0});
    //         }
    //         if(appendIndex >= bubbleLength-1){
    //             appendIndex = 0;
    //         }else{
    //             appendIndex++;
    //         }
    //         setTimeout(appendBubble,delayTime);
    //         if(delayTime == 20000){
    //             delayTime = 3000;
    //         }else{
    //             delayTime = 20000;
    //         }
    //     }
    //     appendBubble();
    // }
    // if($('.bulletin-con')['0']){
    //     autoScrollBubble();
    // }
    //簽單快報滾動（最第一版）end