jq消息滚动，无缝拼接

css

<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .wdt-container .headerNotice-wrap {
        height: 50px;
        border-bottom: solid 1px #f0f0f0;
        background-color: #ffffff;
        color: #a0a0a0;
        font-size: 14px;
        overflow: hidden;
    }
    .wdt-container .noticetitle {
        width: 100px;
        line-height: 50px;
        text-align: center;
        float: left;
    }

    .wdt-container .headerNotice {
        float: left;
        width: calc(100% - 300px);
        height: 50px;
        overflow: hidden;
        position: relative;
    }
    .wdt-container .headerNotice ul {
        width: 100%;
        margin: 0 0 0 15px;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .wdt-container .headerNotice ul li {
        width: 100%;
        height: 50px;
        line-height: 50px;
    }
    .wdt-container .headerNotice ul li.hot {
        padding-left: 35px;
    }
    .wdt-container .headerNotice ul li a {
        float: left;
        max-width: 70%;
        height: 50px;
        line-height: 50px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #a0a0a0;
    }
    .wdt-container .headerNotice ul li a.date {
        float: left;
        height: 50px;
        line-height: 50px;
        padding-left: 18px;
    }
    .wdt-container .morenotice {
        float: right;
        width: 100px;
        line-height: 50px;
        text-align: center;
    }
    .wdt-container .morenotice a {
        color: #a0a0a0;
    }
</style>

html

<div class="wdt-container">
    <div class="headerNotice-wrap">
        <div class="noticetitle">平台公告</div>
            <div class="headerNotice">
                <ul>
 
                </ul>
            </div>
        <div class="morenotice"><a href="">更多公告</a></div>
    </div>
</div>

js

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function(){
        var data = {value:{afficheList:
                [{title:'第一条',publishTime:'2018-08-09'},
                 {title:'第二条',publishTime:'2018-08-09'},
                 {title:'第三条',publishTime:'2018-08-09'}]
        }}
        //模拟ajax数据
        var data = data.value.afficheList;
        var listDom=''
        for(var i=0;i<data.length;i++){
            listDom+='<li class="hot">'+
                        '<a href="">'+data[i].title+'</a>'+
                        '<a href="" class="date">'+data[i].publishTime.slice(0,10)+'</a>'+
                     '</li>'
        }
        listDom+='<li class="hot">'+
                     '<a href="">'+data[0].title+'</a>'+
                     '<a href="" class="date">'+data[0].publishTime.slice(0,10)+'</a>'+
                 '</li>'
        $(".wdt-container .headerNotice ul").append(listDom)
        var noticeUl = $(".wdt-container .headerNotice ul");
        var noticeLi = $(".wdt-container .headerNotice ul li");
        var noticeLength = noticeLi.length
        var firstTime = 1
        var noticeTimer = setInterval(function () {
            if(firstTime==noticeLength){
                noticeUl.css({'top':'0'})
                firstTime = 1
            }
            noticeUl.animate({top:-50*firstTime},1000)
            firstTime++
        },2700);
        $(".wdt-container .headerNotice ul li a").mouseenter(function (){
            clearInterval(noticeTimer)
        }).mouseleave(function (){
            noticeTimer = setInterval(function () {
                if(firstTime==noticeLength){
                    noticeUl.css({'top':'0'})
                    firstTime = 1
                }
                noticeUl.animate({top:-50*firstTime},1000)
                firstTime++
            },2700);
        });
 
 
 
    })
</script>