本文实例分析了jquery实现图片走马灯效果的原理。分享给大家供大家参考，具体如下：
这里只讲解水平走马灯效果，垂直向上走马灯效果不讲解，原理一样，但是水平走马灯效果有一个小坑。待会讲解
先上代码：
html：

在中，再包含了一个div，且设置了一个很比较大的宽度，是为了解决一个在垂直走马灯下没有的坑。该坑的效果是在li标签float为left的情况，不要里面的div，会出现图片轮播后，显示中的最后一张图片由下向上的跳动效果，这是float的本身特性造成的，因为父元素宽度不够的情况下，后面的元素会自动往下左沉下去，一旦上面宽度够了，就会自动飘上来，这个飘就会造成显示中的最后一张图片的跳动效果，所以采用内部嵌套一个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;}
脚本：

此处照例使用了jquery的动画效果函数animate来实现走马灯效果，并配合appendto函数来实现无尽播放的效果。
有关appendto函数的作用请参阅jquery的api文档，animate也请参阅api文档
更多关于jquery特效相关内容感兴趣的读者可查看本站专题：《jquery动画与特效用法总结》与《jquery常见经典特效汇总》
希望本文所述对大家jquery程序设计有所帮助。