本文实例讲述了jQuery实现的图片轮播效果。分享给大家供大家参考，具体如下：

！doctype html html lang=' en ' hearta charset=' UTF-8 '标题图片轮播/title style type=' text/CSS ' * { padd : 0；保证金： 0；}李{列表式-类型：无；}车身{ margin : 50px } a img { border : none }。包装{宽度： 500像素高度： 350像素；border: 3px实心# f00位置：相对；飞越：隐藏；}.包装ul {宽度： 2500px绝对位置：左： 0；top : 0；}.向左缠绕ul li { float:宽度： 500像素；}.绝对包装ol { position : bottom : 10pxright : 10px }。向左缠绕ol li { float:宽度： 16px高度： 16px线高： 16px文本对齐：中心；border: 1px固体# fc0背景技术： # 000;color: # fff右边距： 3px光标：指针；}.包装李。当前{背景： # fffcolor: # 000}。包起来。介绍{ height: 30px线高： 30px宽度： 350像素；background: rgba(0，0，0，0.5)；color: # fff绝对位置：bottom : 10pxleft : 0；/* opa城市3360 0.5；filter:alpha(不透明度=50);*/}/style/head dydiv class=' wrap ' ul lia href=' # # # ' img src=' http :1。jpg ' alt='阅谁问君诵，水落清香浮/a/Li lia href=' # # # ' img src=' http :2。jpg ' alt='天若无人解上文，吾人自惜问天去/a/Li lia href=' # # # ' img src=' http :3。jpg ' alt='风雨聊程/a/Li lia href=' # # # ' img src=' http :4。jpg ' alt='流星与共谁与共，人生无求复何求/a/Li lia href=' # # # ' img src=' http :5。jpg ' alt='一站式共享网络/a/Li/ul ol Li class=' current ' 1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li/ol p class=' introduction ' 111111/p/div脚本src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ var oul=$().换行ul’)；var ali=$(' .用ul li '包装；var numLi=$(' .包装ol Li’)；var aliWidth=$(' .用ul li '包装等式(0).宽度();var _ now=0；//这个是控制数字样式的计数器var _ now 2=0；//这个是控制图片运动距离的计数器var timeIdvar aimg=$(' .包装ul img’)；var op=$(' .换行p’)；numli。单击(function(){ var index=$(this)).index()；_now=索引；_ now2=索引；var imgAlt=aimg.eq(_now).attr(' alt ')；op . html(IMgalt)；$(这个)。addClass('current ').兄弟姐妹()。移除CLaSS()；乌尔。animate({ ' left ' :-aliWidth * index }，500)；});/* * *[滑块说明]图片运动的函数* @return {[type]} [description]无返回值*/function slider(){ if(_ now==numli。大小()-1){阿里。等式(0).css({ '位置' : '相对'，'左侧' : oul。width()})；_ now=0；} else { _ now} _ now2numLi.eq(_now).addClass('current ').兄弟姐妹()。移除CLaSS()；var imgAlt=aimg.eq(_now).attr(' alt ')；op . html(IMgalt)；乌尔。animate({ ' left ' :-aliWidth * _ now 2 }，500，function(){ if(_ now==0){ Ali。等式(0).css('position '，' static ')；oul.css('left '，0)；_ now 2=0；} });} timeId=setInterval(滑块，1500);/*$('.换行')。将鼠标悬停在(function(){ clearInterval(TiME id))；});$('.换行')。鼠标移出(函数(){ timeId=setInterval(滑块，1500);});*/$('.换行')。悬停(函数(){ clearInterval(timeId))；}，函数(){ timeId=setInterval(滑块，1500);});});/脚本/正文/html运行效果图如下：

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

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