jquery图片渐隐渐显效果

首页 > jquery > jquery图片渐隐渐显效果

jquery图片渐隐渐显效果

2010年7月7日 luo

自己写的query图片渐隐渐显效果，很实用，代码少，很简洁，如果你觉得合适可以拿去用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery图片渐隐渐显效果</title> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} #box{width:586px; height:150px; overflow:hidden; position:relative; margin:0 auto;} #slider{ width:586px; height:150px;} #slider li{ font-size:0px; position:absolute; left:0px;top:0px; display:none;} #num{ position:absolute; right:5px; bottom:5px;} #num span{ color:#FFF; display:inline-block; background-color:#666666; padding:0 6px; margin:0 2px; font-weight:bold; cursor:pointer;} #num .on{ background-color:#FF6537; padding:2px 8px;} </style> <script src="http://www.uedspace.com/zuopin/js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#slider li').eq(0).show(); var len = $('#num span').length; var index = 0; $('#num span').mouseover(function(){ index = $('#num span').index(this); picShow(index); }) $('#box').hover(function(){ if(playPic){ clearInterval(playPic); } },function(){ playPic = setInterval(function(){ picShow(index); index++; if(index==len){index=0} },3000) }) var playPic = setInterval(function(){ picShow(index); index++; if(index==len){index=0} },3000) function picShow(i){ $('#slider li').eq(i).stop(true,true).fadeIn().siblings().fadeOut(); $('#num > span').eq(i).addClass('on').siblings().removeClass('on'); } }); </script> </head> <body> <div id="box"> <ul id="slider"> <li><img src="http://www.uedspace.com/zuopin/images/1.gif" width="586" height="150" alt="1" /></li> <li><img src="http://www.uedspace.com/zuopin/images/2.gif" width="586" height="150" alt="2" /></li> <li><img src="http://www.uedspace.com/zuopin/images/3.gif" width="586" height="150" alt="3" /></li> </ul> <div id="num"> <span class="on">1</span> <span>2</span> <span>3</span> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。