將訊息標題滾動

上面是效果

        <li class="layui-nav-item">
                <div class="layui-carousel" id="msg-id" >
                    <div carousel-item style="color:peru; text-align:center" id="msg-id2">
                        <!--<div >條目1</div>
                        <div >條目2</div>
                        <div>條目3</div>
                        <div>條目4</div>
                        <div>條目5</div>-->
                    </div>
                </div>
            </li>

layui.define(['form', 'carousel'], function(exports){
var $ = layui.$
, setter = layui.setter
, admin = layui.admin
, view = layui.view
, form = layui.form
, router = layui.router()
, search = router.search
, laytpl = layui.laytpl
, carousel = layui.carousel;                          ----------這個不能少，不然報錯

 
   var url = '/api/Message/TitleRoll';   //載入訊息標題
          var Parment = {

          };
          var callback = function (info) {
            if (info.Result) {
              var html = "";
              for (var i = 0; i < info.Data.length; i++) {
                var item = info.Data[i];
               
 
// html += "<a href='#'>" + item.MsgTitle + "</a>";
                html += "<div>" + item.MsgTitle + "</div>";

              }
              $("#msg-id2").html(html);                    ---把查到的訊息標題放入
              //建造例項
              carousel.render({
                elem: '#msg-id'
                , width: '250px' //設定容器寬度
                , height: '50px' //設定容器高度
                , arrow: 'none' //始終顯示箭頭
                , indicator: 'none'
                , anim: 'updown' //切換動畫方式
                , autoplay: true   //是否自動切換
                , interval: 2000   //時間間隔
              });

            }
            else {
              $('.layui-badge-dot').removeClass();
            }
          }
          admin.ajax(url, Parment, callback);
}