javascript图片自动轮番

分手后的思念是犯贱 2022-01-09 16:07 200阅读 0赞

昨天我和同事聊天谈到 叫我不要什么效果用js用面向对象编程 但是我个人认为 用js面向对象编程 有以下几个好处：一： 代码冗余量低 二： 维护性高 三： 代码量精简 相对来说 提高性能 四：不依赖于HTMl结构中的类名或者ID 当页面中的类改时候 面向对象的js根本就不需要任何改动 只是传个参数进来而已 等等 恩 既然同事说 不要什么用面向对象的方式来写的话 今天我就用面向过程来编程下 今天也简单的写了一个 图片自动轮番效果 其实这个就是和tab切换的原理是一模一样的 也蛮简单的 写了很多js 发现自己的js有了很大的提高 现在自己也可以手写代码 也不是依赖已什么框架 现在基本上能手写代码了 用原审js 但是当在写一点效果时候 如果碰到复杂的动画时候 可能就希望要用到jquery或者kissy框架了 这个用原审js就不好写了！废话小说 ： 代码如下：

先还是一些基本的base方法：

1.  function getElementsByClassName(className,context)\{
2.  context = context || document;
3.  if(context.getElementsByClassName)\{
4.  return context.getElementsByClassName(className);
5.  \}
6.  var nodes = context.getElementsByTagName("\*"),ret=\[\];//获取页面上的所有节点
7.  for(var i=0;i<nodes.length;i++)\{ //遍历所有的节点
8.  if(hasClass(nodes\[i\],className)) ret.push(nodes\[i\]);
9.  \}
10. return ret;
11. \}
12. 
13. //检查有没有类
14. function hasClass(node,className)\{
15. var names = node.className.split(/\\s+/);//正则表达式所有的类名用空格分开 
16. //遍历这个类名
17. for(var i=0;i<names.length;i++)\{
18. if(names\[i\]==className)
19. return true;
20. \}
21. return false;
22. \}
23. 
24. /\*\*
25. 参数说明
26. curTime 当前时间 即动画已经进行了多长时间 开始时间为0
27. start : 开始值
28. dur : 动画持续多长时间
29. alter : 总的变化量
30. \*/
31. function animate(o,start,alter,dur,fx)\{
32. var curTime=0;
33. var t = setInterval(function()\{
34. if(curTime>=dur) clearInterval(t);
35. for(var i in start)\{
36. o.style\[i\] = fx(start\[i\],alter\[i\],curTime,dur) + "px";
37. \}
38. curTime+=50;
39. \},50)
40. return function()\{
41. clearInterval(t);
42. \};
43. \}
44. 
45. function Linear(start,alter,curTime,dur)\{
46. return start + curTime/dur \* alter;
47. //最简单的线性变化 即匀速运动 
48. \}
49. //加速运动
50. function Quad(start,alter,curTime,dur)\{
51. return start + Math.pow(curTime/dur,2)\*alter;
52. \}
53. function addClass(obj,className)\{
54. obj.className+=" " \+className;
55. return obj;
56. \}
57. function delClass(obj,className)\{
58. var s = obj.className.split(/\\s+/);//正则把类名分开 
59. for(var i=0;i<s.length;i++)\{
60. if(s\[i\]==className)\{
61. delete s\[i\];
62. \}
63. \}
64. obj.className = s.join(" ");
65. return obj;
66. \}
67. function addEvent(obj,type,fn,status)\{
68. if(obj.addEventListener)\{
69. obj.addEventListener(type,fn,false);
70. \}else\{
71. obj.attachEvent("on"\+type,function()\{
72. fn.call(obj);
73. \})
74. \}
75. \}

页面的代码如下：

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=utf-8" />
5.  <title>无标题文档</title>
6.  <style>
7.  div,ul,li\{ list-style:none; margin:0; padding:0;\}
8.  img\{ border:none;\}
9.  .slider\{ width:634px; height:230px; overflow:hidden; margin:50px auto 0; position:relative;\}
10. .imgMarquee\{ position:absolute; left:0; top:0; z-index:10;\}
11. </style>
12. <script src="base.js"></script>
13. </head>
14. 
15. <body>
16. <div class="slider" id="slider">
17. <div class="imgMarquee">
18. <img src="01.jpg" width="630" height="230" class="timg"/>
19. <img src="02.jpg" width="634" height="230" class="timg"/>
20. <img src="03.gif" width="634" height="230" class="timg"/>
21. </div>
22. </div>
23. <script type="text/javascript">
24. var slider = document.getElementById("slider");
25. var imgMarquee = getElementsByClassName("timg");
26. var currentIndex = 0;
27. var t;
28. t = setInterval(function()\{
29. Start();
30. \},3000)
31. function Start()\{
32. if(currentIndex >= imgMarquee.length)\{
33. currentIndex = 0;
34. \}
35. showItem(currentIndex);
36. currentIndex++;
37. \}
38. function showItem(n)\{
39. for(var i=0;i<imgMarquee.length;i++)\{
40. imgMarquee\[i\].style.display = "none";
41. \}
42. imgMarquee\[n\].style.display = "block";
43. \}
44. slider.onmouseover = function()\{
45. clearInterval(t);
46. \}
47. slider.onmouseout = function()\{
48. t = setInterval(function()\{
49. Start();
50. \},3000)
51. \}
52. </script>
53. </body>
54. </html>

转载于:https://blog.51cto.com/tugenhua/771622