上圖中的文字會滾動顯示。

html：

<ul id="tbheadline">
            <li><span>最新</span> <p>巧克力熱銷top榜</p></li>
            <li><span>雙11</span> <p>雙11晚會我們等著你</p></li>
            <li><span>熱賣</span> <p>2016車載充電器熱賣場</p></li>
            <li><span>雙11</span> <p>TFboys變天使飛起來了！</p></li>
            <li><span>雷軍</span> <p>雷軍問答送MAX F碼！</p></li>
</ul>
 

#tbheadline li{
    height: 40px;
    position: relative;
    top: 10px;
    left: 10px;
    line-height: 20px;
}

#tbheadline li span{
    width: 40px;
    display: block;
    border: 1px solid red;
    border-radius: 10px;
    font-size: 13px;
    float: left;
    text-align: center;
    color: tomato;
}

#tbheadline li p{
    margin-left: 20px;
    float: left;
}
 

function textScroll(){
    $(function(){
        $('#tbheadline li').eq(1).fadeOut(100,function(){
            //   alert($(this).clone().html());
            //克隆:不用克隆的話，remove()就沒了。
            $(this).clone().appendTo($(this).parent()).fadeIn(100).siblings().hide();
            $(this).remove();
        });
    });
}
setInterval('textScroll()',2000);