效果截图：

HTML代码：

<div class="lantern-content">
    <ul class="lantern-ul">
        <li>华丽而简单的走马灯1</li>
        <li>华丽而简单的走马灯2</li>
        <li>华丽而简单的走马灯3</li>
        <li>华丽而简单的走马灯4</li>
        <li>华丽而简单的走马灯5</li>
        <li>华丽而简单的走马灯6</li>
        <li>华丽而简单的走马灯7</li>
        <li>华丽而简单的走马灯8</li>
        <li>华丽而简单的走马灯9</li>
    </ul>
</div>

CSS代码：

.lantern-content{width: 50%; margin: 0px auto; background-color: #000000; height: 50px;}
.lantern-content .lantern-ul li{list-style: none; float: left; line-height: 50px; color: #FFFFFF; padding: 0px 20px; position: relative;}

JS代码：

var offsetNum = 0;
function lantern(){
    var _liLen = $(".lantern-ul").find("li").length;
    var _liWidth = $(".lantern-ul li").width();
    var _allWidth = _liLen * _liWidth;
    $(".lantern-ul").css("width", _allWidth);
    if (offsetNum < -_allWidth) {
        offsetNum = 0;
    }
    offsetNum -= 1;
    $(".lantern-ul li").css({"left": offsetNum});
}

$(function(){
    setInterval(lantern, 50);
})