先看下前几天的动画是如何构造JS的： 复制代码 代码如下: var photo=function(){ var index=0,a,b,c,d; return { show:function(){}, auto:function(){} } } var aa=photo(); //基本上是 用return 返回了一些方法。 // 1：无法初始化就执行 auto。 // 2:在初始化的时候，我没办法把this指向aa。 //上面两个问题，会很不方便。 1：我不愿意让自己去这洋写： 复制代码 代码如下: var aa=photo("id"); aa.auto()//多一句话，很不好看。 理想状态是我在 var aa=photo("id")的时候就告诉程序是否自动播放。 2：如果有两个动画在同一个页面。 比如： 复制代码 代码如下: var aa=photo("id1"); aa.auto() var bb=photo("id2"); bb.auto() 那么他们都有用户控制动画的A标签，如何各自负责自己的动画。不互相干扰。（其实他涉及到私有变量的问题，还有this指向）; 申明：网上有很多解决上面问题的方法。下面的只是我弄明白了。所以来给大家分享，高手见笑了。 不错，又是在公车上，我解决了这个问题。《javascript语言精粹》第52页 5.4函数化 我来看一下这个 函数化构造器的源代码： //加粗表示强调 //这个方法是 《javascript语言精粹》第52页 5.4函数化 上的。 var constructor = function (spec,my){ var that,其他的私有实例变量; my = my || {}; 把共享的变量和函数添加到my中 that = 一个新对象 添加给that 的特权方法 return that; } 看下面的方法： 复制代码 代码如下: var photo = function(spec){ var _this={},index,a,c,d; //这里可以初始化用户控制的a标签 //比如这洋 a.onmouseover=function(){ _this.go();//可以调用哦 } _this.show=function(){}; _this.auto=function(){}; _this.go=function(){}; // 这里可以直接调用刚才申明好的方法 _this.auto()//可以直接调用 return _this; } var bb=photo({index:1;}); var aa=photo({index:2}); //上面创建了 bb aa 两个不同的动画，不会互相影响哦。 // 如果我对javascript语言精粹 的函数化 理解有问题。还请指教... 最后这个动画就比较完美了。可是私有变量太多了。如果可以设置默认值，可以使用者选择性的传进来。会比较好 所以可以添加下面这个函数：（这是很多人都使用的啦） 复制代码 代码如下: var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } // 看到 Extend 大家都知道 他是做什么用的了。 最后贴出我今天写的这个 图片轮换的源代码： javascript 图片轮换 body,ul,li{ margin:0; padding:0;} #div{width:610px;height:210px;overflow:hidden;} #photo li{height:210px; overflow:hidden; background:#fff url(001.gif) no-repeat center center;} #photo2 li{height:210px; overflow:hidden; background:#fff url(001.gif) no-repeat center center;} .number-warp{position:absolute;margin-top:-50px;width:600px; text-align:right;} .number-warp a{border:1px solid #CCC; width:30px; height:30px; display:inline-block; height:100%;margin-left:5px; text-align:center; text- decoration:none;} .sel{background:#CCC;} 1 2 3 4 5 1 2 3 4 var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var photo=function(spec){ var $=function(id){ return document.getElementById(id); }, _this={}, a=document.getElementById(spec["number"]).getElementsByTagName("A"), my={ $:"", change:-210, d:50, num:3, au:true, index:0,x:null,v:null }, tween=function(t,b,c,d){ return -c*(t/=d)*(t-2)+b; }, autoo=function(){ _this.show( my.index+1 > my.num ? 0 : my.index+1); }; Extend(my,spec)//用他更好一点 for(var i=0 ;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JavaScript 语言的递归编程

题目：从1累加一直加到100的和是多少？ 非递归的循环写法： 复制代码 代码如下: 1run: function() { 2 var sum = 0; 3 for(var i=1;i<=100;i++) { 4 sum = sum + i; 5 } 6 console.log(sum); 7} 递归的写法： 复制>>>详细阅读

本文标题：javascript 图片轮换 函数化继承

地址：http://www.17bianji.com/kaifa2/JS/26357.html

 1/2    1