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

面向对象原生js幻灯片代淡出效果
面向对象原生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">
11. var t=0;
12. var c;
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. }
122. </script>
123. <div id="n">
125. </div>
126. <div class="box" id="box">
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" />
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. }
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; 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>
172. <script>
173. var hd=new slidingClass("box");
174. hd.start()
175. </script>
176. </body>
177. </html>
相关阅读:
redis集群搭建
 redis状态查看
 redis动态修改参数配置
 redis的info
redis安装配置
 redis命令总结
 rabbitmq安装
 怎么把U盘启动改为硬盘启动（适用于U盘安装系统时）
监控宝篇之一（快速入门）
raid详解
原文地址：https://www.cnblogs.com/jinhuixin/p/dianshichengjin.html