jQuery轮播图效果精简版完整示例

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

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title轮播图/title style type=' text/CSS '/* base style */html，body，div，ul，li { margin:0划水：0;} body { font-family : \ 5FAE \ 8F6F \ 96 C5 \ 9ED1，' Arial '；color : # 333 font-size :12 px；背景-color : # fff；} img { border : none } ul Li { list-style-type : none；}/*伦博风格*/#滚动图片{ width :560 px高度： 300 pxmargin 336020 px自动0自动飞越：隐藏；位置：相对；}.num { position : absolute eright :5 pxbottom :5 px } # scroll pics .num li左侧浮动：color: # FF7300文本对齐：中心；线高： 16px宽度： 16px高度： 16pxcursor:指针；飞越：隐藏；margin : 3px 1pxborder : 1px实心# FF7300背景-color : # fff；}#scrollPics .num li.on { color: # fff线高： 21px宽度： 21pxheight : 21 px font-size : 16px；margin: 0 1pxborder : 0背景-颜色： # FF7300字体粗细：粗体；}/style/head dydiv id=' scroll pics ' ul class=' slider ' liimg src=' http :2。jpg '/Li liimg src=' http :3。jpg '/Li liimg src=' http :4。jpg '/Li liimg src=' http :5。jpg '/Li liimg src=' http 33601。jpg '/Li/ul class='num Li ').长度；定义变量索引=0;//图片序号var adTimer$(')。数李' .mouseover(function() { index=$(').数李' .索引（这个);//获取鼠标悬浮里的索引showImg(索引);}).等式(0).鼠标悬停在()；//滑入停止动画，滑出开始动画$('#scrollPics ').hover(function(){ clearInterval(ADTiMer))；}，function(){ adTimer=setInterval(function(){ showImg(index)index；if (index==len) { //最后一张图片之后，转到第一张索引=0;} }, 3000);}).触发器(“鼠标离开”)；函数show img(index){ var AdhTarget=$(' # scrolpisculli : first ').高度();$('.滑块')。停止（真，假)。动画({ ' MarginTop ' :-AdhTare * index ' px '//改变marginTop属性的值达到轮播的效果}, 1000);$('.数李' .removeClass('on ').eq(指数)。添加CLaSS(' on ')；}/脚本/正文/html运行效果图如下：

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

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