jquery实现简单的旗帜轮播效果【实例】

朋友给我看了一个轮播效果，把射流研究…下载一看，丫丫的一个这么简单的效果，这么的就能写个几百行的，严重影响浏览器加载速度嘛，以为人家宽带流量不要钱玩的哦。无奈之下给他写了个简单的，把所有代码放上去都没有超过70行，还有圆角的那个CSS，不是每个浏览器都是圆角的，不过不影响美观，嘻嘻。

html xmlns=' http://www。w3。org/1999/XHTML '标题无标题页/title脚本src=' http : js/jquery-2。1 .4 .js ' type=' text/JavaScript '/脚本样式type='text/css ' .清除{ overflow : hidden clear : both宽度：0 px高度：0px}。imgbox { width :640 pxmargin :0 auto文本对齐：居中；} ul { padd :0 pxmargin 33600 px } ul Li { float : leftlist-style : none；} ul li。选择{ display:block}。imgnum span { border-radius :10 px；font:normal正常正常正常粗体12px/15px微软雅黑；颜色： # FFF；边距-左侧：5 pxpadding:3px 6px 3px 6px背景-颜色： # F90光标：指针指针；} .imgnum span。在选择{底色： # F00} .imgnum { text-align : center右浮动：边距：-30px 30px；位置：相对；}/style/head body div class=' imgbox ' ul id=' banner _ img ' liimg src=' http : images/banner 1。jpg '/Li liimg src=' http : images/banner 2。jpg '/Li liimg src=' http : images/banner 3。jpg '/Li liimg src=' http : images/banner 4。jpg '/Li liimg src='var指数=1;$(function(){ show img(index))；//鼠标移入移出$('.imgnum span ').悬停(函数(){ clearTimeout(时间));var图标=$(这个)。text()；$('.imgnum span ').removeClass('onselect ').eq(图标-1)。添加CLaSS(' on select ')；$('#banner_img li ').隐藏()。停止（真，真)。eq(图标-1)。fadeIn('慢');}，function () { index=$(this).正文()4?1 :parseInt($(this).text())1；time=setTimeout(' show img(' index ')'，3000)；});});函数显示img(num){ index=num；$('.imgnum span ').removeClass('onselect ').eq(指数-1)。添加CLaSS(' on select ')；$('#banner_img li ').隐藏()。停止（真，真)。eq(指数-1)。fadeIn('慢');指数=指数1 5?1 :指数1;time=setTimeout(' show img(' index ')'，3000)；}/脚本/正文/html注意要引用框架文件，图片我就不放上来了，自己替换掉，注意图片长宽。

效果图如下：

以上这篇框架实现简单的旗帜轮播效果【实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。