面向对象原生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. 学习练习 java编写西游记人物类

    package com.hanqi; public class XiYouJiRenWu { double height; String weapon; String name; void prine ...

  2. noip2010提高组题解

    NOIP2010提高组题解 T1:机器翻译 题目大意:顺序输入n个数,有一个队列容量为m,遇到未出现元素入队,求入队次数. AC做法:直接开1000的队列模拟过程. T2:乌龟棋 题目大意:有长度为n ...

  3. javascript设计模式-享元模式

    享元模式采用一个共享来有效的支持大量细小粒度的对象,避免大量有相同内容的类的开销(如内存耗费),共享一个元类. 应用场景:页面存在大量的资源密集型对象:他们具备一些共性,可以分离出公共操作的数据. 一 ...

  4. Solarwinds Orion NPM实战视频演示

    Orion Network Performance Monitor是全面的带宽性能监控和故障管理软件,能监控并收集来自路由器.交换机.服务器和其他SNMP设备中的数据,您可以直接从Web浏览器上观察您 ...

  5. jqmobi 的一些設置

    jqmobi version=2.1; 不是 version =3.0: 好吧,我用了jqmobi 差不多半年了,我竟然連 官方的文檔都沒有看完,怪不得我走了多少的彎路.....哎!!!! 1.隱藏 ...

  6. 【MySQL】MySQL/MariaDB的优化器对in子查询的处理

    参考:http://codingstandards.iteye.com/blog/1344833 上面参考文章中<高性能MySQL>第四章第四节在第三版中我对应章节是第六章第五节 最近分析 ...

  7. 【python】基础

    [字符串]前后引号必须要匹配,相关函数int(),float(),str(),repr(),format(),还有切片运算符 a = 'text'           单引号指定的字符串必须在一个逻辑 ...

  8. JS 和 CSS 的位置对其他资源加载顺序的影响

    JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...

  9. Linux之文件系统的简单操作

    df:列出文件系统整体硬盘使用量 将容量以易读方式显示: [root@zkero ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/s ...

  10. 表格控件表头栏目（Column）与数据表头步

    不用手工增加栏目的列,也就是Column,由数据库的查询结果自动创建. 用的是Delphi2010,安装了Dev,用CxGrid显示数据库查询结果.用什么控件没有关键,道理相同的.