本文實例分析了jQuery實現圖片走馬燈效果的原理。分享給大家參考，具體如下：
這裡只講解水平走馬燈效果，垂直向上走馬燈效果不講解，原理一樣，但是水平走馬燈效果有一個小坑。待會講解
先上程式碼：
HTML：
<div class="box">
<div style="width: 1000px;" id="boxdiv">
<ul>
<li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
<img src="images/110927/11-11092G32227.jpg" /></a></li>
<li title="美女海边性感透视装诱惑"><a href="#">
<img src="images/130621/1-130621145931-50.jpg" /></a></li>
<li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#">
<img src="images/130620/19-130620115013.jpg" /></a></li>
<li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
<img src="images/130315/5-130315135240.jpg" /></a></li>
</ul>
</div>
</div>
在
CSS:
.box
{
width: 800px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
overflow: hidden;
}
.box img
{
border-style: none;
height: 200px;
}
.box ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.box ul li
{
float: left;
}
腳本：
<script type="text/javascript">
$(document).ready(function () {
new ZouMa().Start();
});
function ZouMa() {
this.maxLength = 3; //最低显示数
this.Timer = 2000;//计时器间隔时间
this.Ul = $(".box ul");
var handId;//计时器id
var self = this;
this.Start = function () {
if (self.Ul.children().length < this.maxLength) {
self.Ul.append(self.Ul.children().clone());
}
handId = setInterval(self.Play, self.Timer);
}
this.Play = function () {
var img = self.Ul.children().eq(0);
var left = img.children().eq(0).width();
img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () {
//appendTo函数是实现走马灯一直不间断播放的秘诀。
//目前网上看到的很多走马灯，走到最后一张的时候，会立马闪回第一张，而不是继续从后往前推进，即是没有明白该函数的作用的原因
$(this).css("margin-left", "auto").appendTo(self.Ul);
});
}
}
</script>
此處照例使用了jquery的動畫效果函數animate來實現走馬燈效果，並配合appendTo函數來實現無盡播放的效果。
有關appendTo函數的作用請參閱jquery的API文檔，animate也請參閱API文檔
更多關於jQuery特效相關內容有興趣的讀者可查看本站專題：《jQuery動畫與特效用法總結》與《jQuery常見經典特效總結》
》希望本文所述對大家jQuery程式設計有所幫助。
