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

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

！doctype html html lang=' en ' hearta charset=' UTF-8 '标题滑块/标题样式* { padd : 0；保证金： 0；}李{列表式-类型：无；}车身{ margin: 50px}。包装{ border: 3px固体# f00宽度： 600像素；高度： 200像素；相对位置：飞越：隐藏；}.隐藏ul { overflow:位置：绝对；宽度： 1600像素；左： 0；top : 0；_ height:1px}。向左缠绕ul li { float:宽度： 200像素；}/style/head dya href=' JavaScript :class='goLeft '向左走/aa href=' JavaScript :class='goRight '向右走/adiv class=' wrap ' ul liimg src=' http :1。jpg ' alt=' '/Li Li img src=' http :2。jpg ' alt=' '/Li Li img src=' http :3。jpg ' alt=' '/Li Li img src=' http :4。jpg ' alt=' '/Li Li img src=' http 33605。jpg ' alt=' '/Li/ul

//如果想要使一个元素运动起来，一般情况下这个元素须要具有位置属性绝对/相对$(function(){ var oul=$(').换行ul’)；var OulHTML=Oul。html()；乌尔。html(OuHTML OuHTML)var timeId=null；var ali=$(' .用ul li '包装；var aliWidth=ali.eq(0).宽度();var aliSize=阿里。size()；var ulWidth=aliWidth * aliSizeoul。宽度(ulWidth)；//1600px var速度=2;函数滑块(){ if(速度0){ if(oul。CSS(' left ')==-ulWidth/2 ' px '){ oul。CSS('左'，0)；} oul.css('left '，'=-2px ')；} if(速度0){ if(oul。CSS(' left ')=' 0px '){ oul。CSS(' left '，-ulWidth/2 ' px ')；} oul.css('left '，'=' speed ' px ')；} } //setInterval()函数的作用是：每隔一段时间，执行该函数里的代码timeId=setInterval(滑块，30);$('.换行')。鼠标悬停(函数(){ //clearInterval()函数的作用是用来清除定时器clearInterval(TiME id)；});$('.换行')。鼠标移出(函数(){ timeId=setInterval(滑块，30);});$('.goLeft ').click(function(){ speed=-2；});$('.'戈莱特').click(function(){ speed=2；});});效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery form操作技巧汇总》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。