首页 > 代码库 > 面向对象原生js幻灯片代淡出效果

面向对象原生js幻灯片代淡出效果

2024-08-01 21:54:17   222人阅读

面向对象原生js幻灯片代淡出效果

下面是代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. </head>
  7. <body style="background:#CCC">
  8. <script type="text/javascript">
  9.  
  10.  
  11. var t=0;
  12. var c;
  13.  
  14. function slidingClass(id){
  15. slidingClass.id=document.getElementById(id);
  16. slidingClass.timer="3000"
  17. }
  19. slidingClass.prototype={
  20. //获取img的个数
  21. imgL:function(tag){
  23. return slidingClass.id.getElementsByTagName(tag).length;
  25. },
  27. hidden:function(){
  28. var l=slidingClass.prototype.imgL("img");
  29. for(i=0;i<l; i++){
  31. if(i!=0){
  32. slidingClass.id.getElementsByTagName("img")[i].style.display="none";
  34. }else{
  36. slidingClass.id.getElementsByTagName("img")[i].style.display="block";
  37. }
  39. }
  41. },
  43. hh:function(num){
  44. slidingClass.id.getElementsByTagName("img")[num].style.display="none"
  45. },
  47. //淡入
  48. fadeIn:function(num){
  49. var v=0;
  50. var t=setInterval(function(){
  51. var id=slidingClass.id.getElementsByTagName("img")[num];
  52. id.style.display="block";
  53. id.style.position="absolute";
  54. id.style.zIndex="9";
  55. id.filters ? id.style.filter = ‘alpha(opacity=‘ + (v+=10) + ‘)‘ : id.style.opacity = (v+=10)/100;
  56. if(v>=100){
  57. clearInterval(t);
  59. }
  60. },10)
  61. },
  63. show:function(num){
  64. var l=slidingClass.prototype.imgL("li");
  65. for(i=0;i<l; i++){
  67. slidingClass.id.getElementsByTagName("li")[i].onclick=function(){
  68. var t=this.innerHTML-1;
  70. slidingClass.prototype.show(t);
  71. slidingClass.prototype.fadeIn(t)
  72. slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
  73. slidingClass.prototype.show(t)
  74. }
  76. if(i!=num){
  77. slidingClass.id.getElementsByTagName("li")[i].className="";
  78. slidingClass.id.getElementsByTagName("img")[i].style.display="none";
  80. }else{
  82. slidingClass.id.getElementsByTagName("li")[i].className="hove";
  83. }
  85. }
  87. },
  88. //开始循环
  89. loop:function(){
  90. slidingClass.prototype.show(t);
  91. slidingClass.prototype.fadeIn(t)
  92. slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
  93. c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
  94. //document.getElementById("n").innerHTML=noe;
  95. t++;
  96. t= t<slidingClass.prototype.imgL("img") ? t:0;
  97. slidingClass.id.onmousemove=function(){
  98. clearTimeout(c);
  100. }
  101. slidingClass.id.onmouseout=function(){
  102. c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
  104. }
  105. },
  107. start:function(){
  109. slidingClass.prototype.hidden();
  111. slidingClass.prototype.loop();
  113. }
  118. }
  119.  
  120.  
  121.  
  122. </script>
  123. <div id="n">
  124.  
  125. </div>
  126. <div class="box" id="box">
  127.  
  128. <img src="http://image.zcool.com.cn/bigPic/1359774079165.jpg" width="1083" height="350" />
  129. <img src="http://image.zcool.com.cn/bigPic/1359774008854.jpg" width="1083" height="350" />
  130. <img src="http://image.zcool.com.cn/bigPic/1359774064447.jpg" width="1083" height="350" />
  131.  
  132. <ul id="li">
  133. <li>1</li>
  134. <li>2</li>
  135. <li>3</li>
  136. </ul>
  137. </div>
  138. <div class="shuming">
  139. 转载注明：本效果出自:<a href="http://suiyidian.cn">suiyidian.cn</a>
  140. </div>
  141. <style type="text/css">
  142. .box{
  143. width:1083px;
  144. height:350px;
  145. overflow:hidden;
  146. margin:200px auto 0px;
  147. border:3px #fff solid;
  148. position:relative;
  149. cursor:pointer;
  150. }
  151.  
  152. .box img{filter:alpha(opacity=100)}
  153. #li{padding:0px; overflow:hidden; position:absolute; right:15px; bottom:15px; z-index:999; height:22px;}
  154. #li,#li *{ margin:0px; padding:0px}
  155. #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}
  156. #li li.hove{ background:#0C0; font-weight:bold}
  157. .shuming {
  158. background: none repeat scroll 0 0 #333333;
  159. border: 1px solid #FFFFFF;
  160. color: #FFFFFF;
  161. font-size: 12px;
  162. height: 20px;
  163. line-height: 20px;
  164. margin: 15px auto 0;
  165. text-align: center;
  166. width: 285px;
  167. }
  168. .shuming a{color:#fff; text-decoration:none}
  169. .shuming a:hover{ text-decoration:underline; color:red}
  170. </style>
  171.  
  172. <script>
  173. var hd=new slidingClass("box");
  174. hd.start()
  175. </script>
  176. </body>
  177. </html>

面向对象原生js幻灯片代淡出效果


联系
我们