面向对象原生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. CentOS yum kvm

    首先,需要我们的cpu支持虚拟化,有的机器支持但是并未在bios开启,这个需要事先开启. 1. Dell R710安装centos6.7 64位 ,Dell R710在开机后按F2进入BIOS,Pro ...

  2. Groovy轻松入门——通过与Java的比较，迅速掌握Groovy （更新于2008.10.18）

    摘自: http://www.blogjava.net/BlueSUN/archive/2007/03/10/103014.html Groovy轻松入门--通过与Java的比较,迅速掌握Groovy ...

  3. myeclipse上SVN代码合并详细步骤图解

    1.  在装有svn插件的myeclipse中,在主干上选择需要合并的文件或文件夹 右击 -> 合并(merge) 2. 选择合并类型--合并两个不同的树 Merge -> Next 3. ...

  4. UTF-8 GBK GB2312 之间的区别和关系

    UTF-8:Unicode TransformationFormat-8bit,允许含BOM,但通常不含BOM.是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中文使用24为(三 ...

  5. Linux命令行选项及参数

    1.main函数参数形式 int main(int argc , char *argv[] , char *env[]); //第一个参数argc代表命令行的参数个数 //第二个参数依次指向各个参数, ...

  6. 当局部变量遇上全局变量——extern及花括号用法举例

    请阅读以下代码并说出它的输出结果. #include <stdio.h> ; int foo() { ; { extern int val; printf("val_foo = ...

  7. javascript 数组对象与嵌套循环写法

    'use strict' var info=[{"name":"最近想跳河","interst":["历史"," ...

  8. Clearing Search Values

      Use the SearchClear() method which is part of the Field class to clear search values on a particul ...

  9. DataGridView控件中添加ComboBox下拉列表框的实现

    //ComboBox控件拖放到DataGridView控件的某个位置 //添加年龄下拉框 private void BindAge() { //我这里添加的是静态数据,一般都是从数据库读出来的,这里就 ...

  10. ASP.NET的学习之asp.net整体运行机制

    1.浏览器向服务器发送请求报文,服务器端的软件比如是IIS,接受请求 2.IIS通过aspnet_isapi.dll 这个程序集来请求FrameWork中的ASP.Net框架,这是对于集成模式 3.进 ...