面向对象原生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. UVa10603 倒水 Fill-状态空间搜索

    https://vjudge.net/problem/UVA-10603 There are three jugs with a volume of a, b and c liters. (a, b, ...

  2. UIBezierPath IOS贝塞尔曲线

    //记录  贝塞尔曲线使用 //根据一个矩形画曲线 + (UIBezierPath *)bezierPathWithRect:(CGRect)rect //根据矩形框的内切圆画曲线 + (UIBezi ...

  3. ionic cordova social media sharing plugin

    https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git 从上面的连接下载 插件 1.肯定是要加入 下面的那个文件的吖 从 ...

  4. 利用Python抓取CSDN博客

    这两天发现了一篇好文章,陈皓写的makefile的教程,具体地址在这里<跟我一起写makefile> 这篇文章一共分成了14个部分,我看东西又习惯在kindle上面看,感觉一篇一篇地复制成 ...

  5. linux下最大文件数

    系统级:系统级设置对所有用户有效.可通过两种方式查看系统最大文件限制1 cat /proc/sys/fs/file-max 2 sysctl -a 查看结果中fs.file-max这项的配置数量如果需 ...

  6. iOS中UIKit——UIFont得到iOS设备上的系统字体

    for (NSString *fontFamily  in [UIFont familyNames]) { NSLog(@"字体家族是:%@",fontFamily); for(N ...

  7. Zend Studio下调试PHP的一点注意事项

    Zend Studio默认php文件的存放路径是你配置的服务器的路径,比如你配置的服务器是localhost,那么,你在zend下建立的文件均是相对于localhost而言的,比如你新建一个php工程 ...

  8. Sorl之.net操作

    http://www.cnblogs.com/zhangweizhong/category/771055.html 插入: SolrNet.Startup.Init<Movie>(&quo ...

  9. 02-线性结构2 Reversing Linked List

    由于最近学的是线性结构,且因数组需开辟的空间太大.因此这里用的是纯链表实现的这个链表翻转. Given a constant K and a singly linked list L, you are ...

  10. vagrant

    puppet chef ansible salt docker https://github.com/ansible/ansiblehttps://github.com/saltstack/salth ...