本文实例分析了jquery实现图片走马灯效果的原理。分享给大家供大家参考,具体如下:
这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑。待会讲解
先上代码:
HTML:
在
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程序设计有所帮助。













