jQuery实现的多张图无缝滚动效果【测试可用】

本文实例讲述了jQuery实现的多张图无缝滚动效果。分享给大家供大家参考，具体如下：

<！doctype html><html lang="en"><head><meta charset="UTF-8"><title>slider</title><style>*{padding: 0;margin: 0;}li{list-style-type: none;}body{margin: 50px;}.wrap{border: 3px solid #f00;width: 600px;height: 200px;position: relative;overflow: hidden;}.wrap ul{overflow: hidden;position:absolute;width: 1600px;left: 0;top: 0;_height:1px;}.wrap ul li{float: left;width: 200px;}</style></head><body><a href="javascript:;" class="goLeft">向左走</a><a href="javascript:;" class="goRight">向右走</a><div class="wrap"><ul><li><img src="1.jpg" alt=""></li><li><img src="2.jpg" alt=""></li><li><img src="3.jpg" alt=""></li><li><img src="4.jpg" alt=""></li><li><img src="5.jpg" alt=""></li></ul></div><script src="jquery-1.7.2.min.js"></script><script src="slider.js"></script></body></html>

slider.js

// 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative$（function（）{var oul = $（".wrap ul"）;var oulHtml = oul.html（）;oul.html（oulHtml+oulHtml）var timeId = null;var ali = $（".wrap ul li"）;var aliWidth = ali.eq（0）.width（）;var aliSize = ali.size（）;var ulWidth = aliWidth*aliSize;oul.width（ulWidth）; //1600pxvar speed = 2;function slider（）{if（speed<0）{if（oul.css（"left"）==-ulWidth/2+"px"）{oul.css（"left",0）;}oul.css（"left","+=-2px"）;}if（speed>0）{if（oul.css（"left"）=="0px"）{oul.css（"left",-ulWidth/2+"px"）;}oul.css（"left","+="+speed+"px"）;} }// setInterval（）函数的作用是：每隔一段时间，执行该函数里的代码 timeId = setInterval（slider,30）;$（".wrap"）.mouseover（function（）{// clearInterval（）函数的作用是用来清除定时器clearInterval（timeId）;}）;$（".wrap"）.mouseout（function（）{timeId = setInterval（slider,30）;}）;$（".goLeft"）.click（function（）{speed=-2;}）;$（".goRight"）.click（function（）{speed=2;}）;}）;

效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格（table）操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。