• 面向对象原生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">
    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; 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>
  • 相关阅读:
    consumer详解
    消费幂等
    死信队列
    消息重试
    负载均衡
    存储层
    producer消息
    消息发送与接收
    TCC
    form表单提交前进行加密
  • 原文地址：https://www.cnblogs.com/jinhuixin/p/dianshichengjin.html
Copyright © 2020-2023  润新知