滚动公告,永远只显示一条

这是项目中用到的公告滚动,我记录下来

function callBacknoticeList(cdoRequest,cdoResponse,cdoReturn){  //公告列表回调
        _shade_layer.hide();//这是加载提示关闭
        if(cdoReturn.nCode == 0 && cdoResponse.exists("cdosNotice")){
            var cdosNotice = cdoResponse.getCDOArrayValue("cdosNotice"); //列表数组
            var nRecordCount = cdoResponse.getIntegerValue("nRecordCount");  //列表条数
            /*如果列表条数为0,隐藏*/
            if(nRecordCount == 0) {
                $("#indexNotice").parent().hide();
                return false;
            }else{
                $("#indexNotice").parent().show();
            }
            
            for(i=0;i<cdosNotice.length;i++){
                cdoObj = cdosNotice[i];
                var strTitle = cdoObj.getStringValue("strTitle");//标题
                var lId = cdoObj.getLongValue("lId");//id
                if(strTitle.length>"20"){   //大于20个字自动隐藏
                    var strTitle = strTitle.substring(0,20);
                    strTitle = strTitle+"...";
                }
                var htmlDiv = $("#tempNotice").html();//获取循环模版
                htmlDiv=htmlDiv.replace("#strTitle#",strTitle);//替换标题
                htmlDiv=htmlDiv.replace("#one1#",lId);//替换创建时间
                //获取li
                var tempDiv=$("<div></div>");
                    tempDiv.html(htmlDiv);
                var li=tempDiv.children("li");
                
                //立即执行函数
                (function(li){
                     li.addEventListener("tap", function(){
                         var id=this.id;
                         _index.messageCenterDetail(id);
                     }, false);
                })(li[0]);
                $("#indexNotice").append(tempDiv.children());
                
            }
            var indexI=-1;
            //实现N条数据不停滚动,且显示一条数据的
            setInterval(function(){
                indexI++;
                if(indexI==li.index()){
                    indexI=0;
                    $("#indexNotice").css({top:"0px",opacity:0});    
                }
                $("#indexNotice").css({opacity:1});
                $("#indexNotice").animate({top:"-"+30*indexI+"px"},"slow");
            },1500);
        }
    }
        <!--公告开始-->
        <div class="index_personalInformationBottom oneBorder" style="display: none">
           <ul id="indexNotice">
               <div id="tempNotice" style="display:none">
                  <li id="#one1#">
                       <p>#strTitle#</span></p>
                       <div class="animQx" ></div>
                  </li>
                </div>
            </ul>
        </div>
        <!--公告结束-->
原文地址:https://www.cnblogs.com/binmengxue/p/5314375.html