layui 文字滚动

将消息标题滚动

上面是效果

        <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);
}