【html+jquery文本无缝滚动】

<style>
    .bulletin-board {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 30px;
        /* background-color: #f5f5f5; */
        padding: 0 10px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
    }

    .left-side {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        overflow: hidden;
    }

    .left-side ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .left-side ul li {
        flex-grow: 0;
        width: 45px;
        text-align: center;
    }

    .right-side {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chain {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
        flex-wrap: nowrap;
        align-content: center;
    }


    .chain-list {
        width: 400px;
        height: 100%;
        /* box-shadow: 0 0 3px 0px #dbdbdb inset; */
        /* background-color: #ffffff; */
        overflow: hidden;
    }

    .tips {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #666;
    }

    .current-city {
        color: #ff8f00;
        font-weight: bold;
    }

    .dominate-excessive-effect {
        transition: transform 0.5s ease-in-out;
    }

    .up-and-down-excessive-effect {
        transition: transform 0.5s ease-in-out;
    }

    .landline-number {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .landline-number .number-icon img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .landline-number .number-text {
        font-weight: bold;
    }
</style>
<div class="bulletin-board">
<div class="chain">
        <div>集团连锁：</div>
<div class="left-side chain-list">
    <ul id="scrollable-text">
        <li>首尔</li>
        <li>北京</li>
        <li>上海</li>
        <li>武汉</li>
        <li>深圳</li>
        <li class="current-city">天津</li>
        <li>四川</li>
        <li>成都</li>
        <li>重庆</li>
        <li>长沙</li>
        <li>杭州</li>
        <li>云南</li>
        <li>苏州</li>
        <li>福州</li>
        <li>沈阳</li>
        <li>厦门</li>
        <li>贵阳</li>
        <li>宁波</li>
        <li>曲靖</li>
        <li>泉州</li>
        <li>万州</li>
        <li>西安</li>
        <li>郑州</li>
        <li>石家庄</li>
        <!-- 添加更多项以确保有足够的内容可以滚动 -->
   </ul>
</div>
</div>
    </div>
<script>
$(function(){
    var options = {
        showItemsLength: 5, // 可设置显示的最大项数
        direction: 'left', // 初始滚动方向
        timeInterval: 2000, // 滚动间隔时间
        rollingSpeed: 1 // 滚动速度
    };
    // 初始化滚动公告栏
    $('.chain-list').scrollableText(options);
})
</script>                                                                                                                                                                                                                           

scrollableText-v1.0.0.js点击下载