jQuery跑馬燈是實現(xiàn)網(wǎng)頁中文字、圖片等動態(tài)展示的一種非常有用的效果。它可以讓文字和圖片像跑馬一樣循環(huán)滾動展示，讓頁面更加生動、有趣，增加用戶的閱讀體驗。

// HTML代碼
<div class="marquee">
<ul>
<li>第1個滾動內(nèi)容</li>
<li>第2個滾動內(nèi)容</li>
<li>第3個滾動內(nèi)容</li>
<li>第4個滾動內(nèi)容</li>
<li>第5個滾動內(nèi)容</li>
</ul>
</div>
//CSS代碼
.marquee{
width: 600px;
height: 100px;
overflow: hidden;
border: 1px solid #aaa;
}
.marquee ul{
width: 3000px;
height: 100px;
margin: 0;
padding: 0;
list-style: none;
}
.marquee li{
float: left;
width: 600px;
height: 100px;
}

如上所示，先通過HTML代碼定義一個div容器，然后定義一個ul列表用于裝載滾動內(nèi)容，每一個滾動內(nèi)容都是一個li標(biāo)簽，并通過CSS代碼控制每個滾動內(nèi)容的寬高以及樣式。接下來，就可以使用jQuery實現(xiàn)滾動效果了。

$(function(){
var speed = 50;//速度，數(shù)值越大越慢
var marquee = $('.marquee ul');
var marqueeChild = $('.marquee ul li');
marqueeChild.clone().appendTo(marquee);
setInterval(function(){
if(parseInt(marquee.css('margin-left')) < -marqueeChild.width()){
marquee.css('margin-left', 0);
}else{
marquee.css('margin-left', parseInt(marquee.css('margin-left')) - 1);
}
}, speed);
});

代碼中，首先定義滾動的速度，然后通過jQuery選擇器獲取到需要滾動的div容器和滾動內(nèi)容的li標(biāo)簽。接著，在滾動內(nèi)容的列表后面添加一個和其相同的內(nèi)容列表，實現(xiàn)無限循環(huán)滾動。在定時器中不斷修改滾動容器的margin-left樣式屬性來實現(xiàn)滾動效果。當(dāng)Marquee的margin-left小于負(fù)的滾動內(nèi)容寬度時，將margin-left設(shè)為0，實現(xiàn)循環(huán)滾動效果。定時器中的速度可以根據(jù)實際需要進(jìn)行調(diào)整。