jQuery实现简洁的轮播图效果实例

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

HTML:

div class=' PPT ' a href=' # # # ' img src=' http : PPT/PPT 1。jpg '/a href=' # ' style=' display : none；'img src=' http : PPT/PPT 2。jpg '/a a href=' # # # ' style=' display : none；'img src=' http : PPT/PPT 3。jpg '/a a href=' # # # ' style=' display : none；'img src=' http : PPT/PPT 4。jpg/a div class=' PPtnum ' span class=' normal ' 4/span span class=' normal ' 3/span span class=' normal ' 2/span span class=' cur ' 1/span/div CSS:

/*幻灯片*/.ppt { width:270px高度：330 pxborder:1px固体# ccc位置：相对；}.ppt img{位置：绝对值；top :10 ppxleft :7 px宽度宽度：255像素宽度：310像素飞越：隐藏；}.pptNum{ position:绝对值；高度： 13px行高： 14pxbottom:12pxright: 10px}。PPT num span { font-size : 12px字体粗细： 400；颜色： # FFF；向右浮动：显示器：块；宽度： 24px文本对齐：中心；背景技术： # 000;左边框：实心1px # FFF；光标：指针；}.pptNum .正常{ color : # FFF；背景技术： # 000;filter: Alpha(不透明度=50);opacity:5 }。pptNum .cur { background : # ce 0609 color : # FFF；}js:

；(函数($){ $。fn。扩展({ ' ppting ' :函数(t){ var num=4；//共多少张要轮播的var $this=$(this)，i=0，$pics=$(' .ppt ')，autoChange=function(){ var $ CurrentPic=$ pics。找(' a : eq '(I 1===num？0 : I 1)')')；$ CurrentPic。CSS({ display : ' block ' }).兄弟姐妹(' a ').CSS({ display : ' none ' })；$ pics。查找('。pptnumspan :包含(' I 2 num？num - i : i 2)')').attr('class '，' cur ').兄弟姐妹(' span ').attr('class '，' normal ')；i=i 1===num？0 : I 1；}，st=setInterval(autoChange，t | | 2000)；这个。悬停(函数(){ clearInterval(ST)；}，function(){ ST=SetInterval(autoChange，t | | 2000)})；$pics.find ' .pptnumSPan ').click(function(){ I=parsent($(this)).正文(),10)-2;autoChange()；});} });}(jQuery))；$('.ppt ').ppting(1000)；调用JQ:

脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。10 .1 .量滴js '/脚本脚本类型=' text/JAVAScript ' src=' http : js/PPT。js '/脚本效果图：

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

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