面向对象原生js幻灯片代淡出效果
自己今天没事写的，希望大侠多多指点哦，好长时间没写有点生了，不过在js中面向对象的东西很少，今天自己写一个以后流着用。
下面是代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body style="background:#CCC"> <script type="text/javascript"> var t=0; var c; function slidingClass(id){ slidingClass.id=document.getElementById(id); slidingClass.timer="3000" } slidingClass.prototype={ //获取img的个数 imgL:function(tag){ return slidingClass.id.getElementsByTagName(tag).length; }, hidden:function(){ var l=slidingClass.prototype.imgL("img"); for(i=0;i<l; i++){ if(i!=0){ slidingClass.id.getElementsByTagName("img")[i].style.display="none"; }else{ slidingClass.id.getElementsByTagName("img")[i].style.display="block"; } } }, hh:function(num){ slidingClass.id.getElementsByTagName("img")[num].style.display="none" }, //淡入 fadeIn:function(num){ var v=0; var t=setInterval(function(){ var id=slidingClass.id.getElementsByTagName("img")[num]; id.style.display="block"; id.style.position="absolute"; id.style.zIndex="9"; id.filters ? id.style.filter = 'alpha(opacity=' + (v+=10) + ')' : id.style.opacity = (v+=10)/100; if(v>=100){ clearInterval(t); } },10) }, show:function(num){ var l=slidingClass.prototype.imgL("li"); for(i=0;i<l; i++){ slidingClass.id.getElementsByTagName("li")[i].onclick=function(){ var t=this.innerHTML-1; slidingClass.prototype.show(t); slidingClass.prototype.fadeIn(t) slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1) slidingClass.prototype.show(t) } if(i!=num){ slidingClass.id.getElementsByTagName("li")[i].className=""; slidingClass.id.getElementsByTagName("img")[i].style.display="none"; }else{ slidingClass.id.getElementsByTagName("li")[i].className="hove"; } } }, //开始循环 loop:function(){ slidingClass.prototype.show(t); slidingClass.prototype.fadeIn(t) slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1) c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer); //document.getElementById("n").innerHTML=noe; t++; t= t<slidingClass.prototype.imgL("img") ? t:0; slidingClass.id.onmousemove=function(){ clearTimeout(c); } slidingClass.id.onmouseout=function(){ c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer); } }, start:function(){ slidingClass.prototype.hidden(); slidingClass.prototype.loop(); } } </script> <div id="n"> </div> <div class="box" id="box"> <img src="http://image.zcool.com.cn/bigPic/1359774079165.jpg" width="1083" height="350" /> <img src="http://image.zcool.com.cn/bigPic/1359774008854.jpg" width="1083" height="350" /> <img src="http://image.zcool.com.cn/bigPic/1359774064447.jpg" width="1083" height="350" /> <ul id="li"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <div class="shuming"> 转载注明：本效果出自:<a href="http://suiyidian.cn">suiyidian.cn</a> </div> <style type="text/css"> .box{ width:1083px; height:350px; overflow:hidden; margin:200px auto 0px; border:3px #fff solid; position:relative; cursor:pointer; } .box img{filter:alpha(opacity=100)} #li{padding:0px; overflow:hidden; position:absolute; right:15px; bottom:15px; z-index:999; height:22px;} #li,#li *{ margin:0px; padding:0px} #li li{ display:inline; float:left; height:20px; line-height:20px; font-size:12px; width:20px; color:#fff; background:#093; border:1px solid #fff; text-align:center; margin-left:3px} #li li.hove{ background:#0C0; font-weight:bold} .shuming { background: none repeat scroll 0 0 #333333; border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 12px; height: 20px; line-height: 20px; margin: 15px auto 0; text-align: center; width: 285px; } .shuming a{color:#fff; text-decoration:none} .shuming a:hover{ text-decoration:underline; color:red} </style> <script> var hd=new slidingClass("box"); hd.start() </script> </body> </html>