本文实例分析了jQuery实现图片走马灯效果的原理。分享给大家供大家参考，具体如下：
这里只讲解水平走马灯效果，垂直向上走马灯效果不讲解，原理一样，但是水平走马灯效果有一个小坑。待会讲解
先上代码：
HTML：
<div> <div id="boxdiv"> <ul> <li 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>
在<div>中，再包含了一个div，且设置了一个很比较大的宽度，是为了解决一个在垂直走马灯下没有的坑。该坑的效果是在li标签float为left的情况，不要里面的DIV，会出现图片轮播后，显示中的最后一张图片由下向上的跳动效果，这是float的本身特性造成的，因为父元素宽度不够的情况下，后面的元素会自动往下左沉下去，一旦上面宽度够了，就会自动飘上来，这个飘就会造成显示中的最后一张图片的跳动效果，所以采用内部嵌套一个DIV 并设置<div>的overflow CSS样式来解决该问题。
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实现图片走马灯效果的原理分析】相关文章：
★ Javascript实现div的toggle效果实例分析