前端之家收集整理的这篇文章主要介绍了
jQuery实现图片走马灯效果的原理分析，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例分析了jQuery实现图片走马灯效果的原理。分享给大家供大家参考，具体如下：
这里只讲解水平走马灯效果，垂直向上走马灯效果不讲解，原理一样，但是水平走马灯效果有一个小坑。待会讲解
先上代码：
HTML：
Box">中，再包含了一个div，且设置了一个很比较大的宽度，是为了
解决一个在垂直走马灯下没有的坑。该坑的
效果是在li
标签float为left的情况，不要里面的DIV，会出现
图片轮播后，
显示中的最后一张
图片由下向上的跳动
效果，这是float的本身特性造成的，因为父元素宽度不够的情况下，后面的元素会
自动往下左沉下去，一旦上面宽度够了，就会
自动飘上来，这个飘就会造成
显示中的最后一张
图片的跳动
效果，所以采用内部嵌套一个DIV 并设置
Box">的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;
}
脚本：
显示数
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);
});
}
}
此处照例使用了jquery的动画效果函数animate来实现走马灯效果，并配合appendTo函数来实现无尽播放的效果。
有关appendTo函数的作用请参阅jquery的API文档，animate也请参阅API文档
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《》与《》
希望本文所述对大家jQuery程序设计有所帮助。
