面向对象原生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. var t=0;
  10. var c;
  11. function slidingClass(id){
  12. slidingClass.id=document.getElementById(id);
  13. slidingClass.timer="3000"
  14. }
  15. slidingClass.prototype={
  16. //获取img的个数
  17. imgL:function(tag){
  18. return slidingClass.id.getElementsByTagName(tag).length;
  19. },
  20. hidden:function(){
  21. var l=slidingClass.prototype.imgL("img");
  22. for(i=0;i<l; i++){
  23. if(i!=0){
  24. slidingClass.id.getElementsByTagName("img")[i].style.display="none";
  25. }else{
  26. slidingClass.id.getElementsByTagName("img")[i].style.display="block";
  27. }
  28. }
  29. },
  30. hh:function(num){
  31. slidingClass.id.getElementsByTagName("img")[num].style.display="none"
  32. },
  33. //淡入
  34. fadeIn:function(num){
  35. var v=0;
  36. var t=setInterval(function(){
  37. var id=slidingClass.id.getElementsByTagName("img")[num];
  38. id.style.display="block";
  39. id.style.position="absolute";
  40. id.style.zIndex="9";
  41. id.filters ? id.style.filter = 'alpha(opacity=' + (v+=10) + ')' : id.style.opacity = (v+=10)/100;
  42. if(v>=100){
  43. clearInterval(t);
  44. }
  45. },10)
  46. },
  47. show:function(num){
  48. var l=slidingClass.prototype.imgL("li");
  49. for(i=0;i<l; i++){
  50. slidingClass.id.getElementsByTagName("li")[i].onclick=function(){
  51. var t=this.innerHTML-1;
  52. slidingClass.prototype.show(t);
  53. slidingClass.prototype.fadeIn(t)
  54. slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
  55. slidingClass.prototype.show(t)
  56. }
  57. if(i!=num){
  58. slidingClass.id.getElementsByTagName("li")[i].className="";
  59. slidingClass.id.getElementsByTagName("img")[i].style.display="none";
  60. }else{
  61. slidingClass.id.getElementsByTagName("li")[i].className="hove";
  62. }
  63. }
  64. },
  65. //开始循环
  66. loop:function(){
  67. slidingClass.prototype.show(t);
  68. slidingClass.prototype.fadeIn(t)
  69. slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
  70. c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
  71. //document.getElementById("n").innerHTML=noe;
  72. t++;
  73. t= t<slidingClass.prototype.imgL("img") ? t:0;
  74. slidingClass.id.onmousemove=function(){
  75. clearTimeout(c);
  76. }
  77. slidingClass.id.onmouseout=function(){
  78. c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
  79. }
  80. },
  81. start:function(){
  82. slidingClass.prototype.hidden();
  83. slidingClass.prototype.loop();
  84. }
  85. }
  86. </script>
  87. <div id="n">
  88. </div>
  89. <div class="box" id="box">
  90. <img src="http://image.zcool.com.cn/bigPic/1359774079165.jpg" width="1083" height="350" />
  91. <img src="http://image.zcool.com.cn/bigPic/1359774008854.jpg" width="1083" height="350" />
  92. <img src="http://image.zcool.com.cn/bigPic/1359774064447.jpg" width="1083" height="350" />
  93. <ul id="li">
  94. <li>1</li>
  95. <li>2</li>
  96. <li>3</li>
  97. </ul>
  98. </div>
  99. <div class="shuming">
  100. 转载注明：本效果出自:<a href="http://suiyidian.cn">suiyidian.cn</a>
  101. </div>
  102. <style type="text/css">
  103. .box{
  104. width:1083px;
  105. height:350px;
  106. overflow:hidden;
  107. margin:200px auto 0px;
  108. border:3px #fff solid;
  109. position:relative;
  110. cursor:pointer;
  111. }
  112. .box img{filter:alpha(opacity=100)}
  113. #li{padding:0px; overflow:hidden; position:absolute; right:15px; bottom:15px; z-index:999; height:22px;}
  114. #li,#li *{ margin:0px; padding:0px}
  115. #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}
  116. #li li.hove{ background:#0C0; font-weight:bold}
  117. .shuming {
  118. background: none repeat scroll 0 0 #333333;
  119. border: 1px solid #FFFFFF;
  120. color: #FFFFFF;
  121. font-size: 12px;
  122. height: 20px;
  123. line-height: 20px;
  124. margin: 15px auto 0;
  125. text-align: center;
  126. width: 285px;
  127. }
  128. .shuming a{color:#fff; text-decoration:none}
  129. .shuming a:hover{ text-decoration:underline; color:red}
  130. </style>
  131. <script>
  132. var hd=new slidingClass("box");
  133. hd.start()
  134. </script>
  135. </body>
  136. </html>

面向对象原生js幻灯片代淡出效果的更多相关文章

  1. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  6. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  7. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 原生js实现雪花飘落效果

    雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...

  9. 原生JS轮播-各种效果的极简实现

    寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...

随机推荐

  1. childNodes在IE与Firefox中的区别

    嗯,这是前几天写一个遍历双层List集合,动态输出对应的表格并且控制固定表头的效果时发现的一个知识点,程序编好后在IE8浏览器下测试没问题,在Firefox35.0.1总是报错,后来发现是IE与FF对 ...

  2. Tomcat Connector三种运行模式

    BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomcat7或以下,在Linux系统中默认使用这种方式. NIO: 利用Java的异步IO处理,可以通过少量的线程处理大量的 ...

  3. 高效渲染css

    译自:http://css-tricks.com/efficiently-rendering-css/ 无可否认我并不经常考虑这个问题… 我们书写的CSS的效率如何,浏览器渲染它的速度如何? 浏览器的 ...

  4. hdu2097

    #include <stdio.h> int sum1(int n,int sign){ ; while(n){ sum+=n%sign; n/=sign; } return sum; } ...

  5. CentOS学习笔记--文件权限概念

    Linux 文件权限概念 当你的屏幕出现了『Permission deny』的时候,不要担心,『肯定是权限设定错误』啦!(以下节选自 鸟哥的 Linux 私房菜 第六章.Linux 的文件权限与目录配 ...

  6. Jetson TK1 Restore 步骤

     Jetson TK1 Restore 步骤 下载驱动包和文件系统包: 1:驱动包 2:文件系统 具体参见文档:http://download.csdn.net/detail/xiabodan/7 ...

  7. 树莓派（Rospberry Pi B+）到货亲测

    1 图鉴 Rospberry Pi  B+终于在今天下午有蜗牛快递公司圆*送到了.B+主要是增加了2个USB,增加了GPIO,sd卡换成了micro sd ...先不说直接上图再说,期待了好久好久 整 ...

  8. 类名 对象名 =new 类名();

    类名 对象名 =new 类名();该怎么理解 类名 对象名 =new 类名();=左边:创建一个类的对象=右边:调用这个类的构造函数初始化对象,类名()这个是构造函数,用来做初始化的.

  9. Log4net使用笔记

    Log4net使用笔记   编写人:CC阿爸 2013-10-29 近来在处理项目时候,想将系统的操作日志以文本的形式记录下来,方便对系统操作记录进行追踪. 经过在网上搜索部分解决方案,大致可以归纳如 ...

  10. AppSetting ，connectionStrings配置节

    <appSettings> <!-- 当前使用的学校代码 --> <add key="DefaultCompanyID" value="cs ...