面向对象原生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. 学习总结 DML数据库增删改语句

    insert into score t values('111','3-105',88)--插入一行数据 insert into score(sno,cno) values('111','3-105' ...

  2. 洛谷P1983 车站分级

    P1983 车站分级 297通过 1.1K提交 题目提供者该用户不存在 标签图论贪心NOIp普及组2013 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 求帮忙指出问题! 我这么和(diao ...

  3. win7下无法安装QTP-少了Microsoft Visual c++2005 sp1运行时组件

    问题是:当我点击QTP的setup.exe进行QTP安装时,出现提示[少了Microsoft Visual c++2005 sp1运行时组件,安装时会提示命令行选项语法错误,键入“命令/?”可获取帮肋 ...

  4. keepalive实现web服务器active/passive

    https://github.com/acassen/keepalived/blob/v1.2.13/doc/keepalived.conf.SYNOPSIS http://ngyuki.hatena ...

  5. dell n2000 组播抑制

    http://en.community.dell.com/support-forums/network-switches/f/866/t/19677497 http://en.community.de ...

  6. 通用简单的 分页 SQL

    select                ID,TITLE,CONTENT,USERNAME,REALNAME,UNIT,UNITID,NOWTIMES,ACCEPTERID,ACCEPTERNAM ...

  7. Linux之samba搭建

    参考资料: http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html

  8. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  9. [转]CentOS开机启动脚本

    转载自http://www.2cto.com/os/201306/220559.html   我的一个Centos开机自启动脚本的制作   一.切换到/etc/init.d/   二.制作sh脚本 v ...

  10. windows 8.1 MessageDialog

    private Popup p; private void Button_Click(object sender, RoutedEventArgs e) { p=new Popup(); Denglu ...