使用場景：

為了讓客戶看到公司產品銷售火熱，網站主希望在網站首頁滾動展示部分訂單。

實際訂單情況，可以從后臺設置。

操作流程：

Step1：

開啟功能：功能->搜索“首頁滾動訂單管理”功能；

Step2：

添加記錄：首頁滾動訂單管理頁面，添加需要展示內容；

Step3：

插入調用標簽：在模板代碼找到需要添加滾動訂單的位置，插入以下的調取代碼，如下；

<div class="info-column col-lg-4 col-md-12 col-sm-12">

<div class="inner-column" style="background-image: url(/storage/14872/tpl/my_23/images/reserve-info.jpg)">

<!-- Sec Title -->

<div class="sec-title light centered">

<div class="title">Join Apply</div>

<h2>已申請</h2>

</div>

<div class="scroll-order" id="scroll_order_0" style="overflow:hidden;height:255px;width:300px;">

    <div id="scroll_order_1">

<ul class="table-list">

    {list_order}

        <li> [value:user/] <span> [value:content/]</span><br>

               <span> 剛剛</span>

        </li>

    {/list_order}

</ul>

    </div>

    <div id="scroll_order_2"></div>

    <script>

        var speed=50;

        scroll_order_2.innerHTML=scroll_order_1.innerHTML 

        function Marquee(){

            if(scroll_order_2.offsetTop-scroll_order_0.scrollTop<=0)

                scroll_order_0.scrollTop-=scroll_order_1.offsetHeight;

            else{

                scroll_order_0.scrollTop++;

            }

        }

        var MyMar=setInterval(Marquee,speed);

        scroll_order_0.onmouseover=function() {clearInterval(MyMar)};

        scroll_order_0.onmouseout=function() {MyMar=setInterval(Marquee,speed);}

    </script>

</div>

效果如圖所示:

參考視頻教程：https://ke.seowhy.com/play/3998.html