javascript 图片轮换 函数化继承
更新时间：2010年05月18日 01:31:19 作者：
一直让我困扰的是，我不知道如何去让这个效果 自动播放，或者费了很多周折。这可能叫初始化。
先看下前几天的动画是如何构造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 大家都知道 他是做什么用的了。
最后贴出我今天写的这个 图片轮换的源代码：
[Ctrl+A 全选 注:引入外部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 大家都知道 他是做什么用的了。
最后贴出我今天写的这个 图片轮换的源代码：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
这几天chatgpt可是非常火的,下面这篇文章主要给大家介绍了关于利用OpenAI ChatGPT进行编码尝试体验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
首先定义一个抽象类，其中调用一些虚方法，虚方法在抽象类中没用定义，而是通过其具体的实现类来实现2014-08-08
这篇文章主要教大家如何简单实现js无缝滚动效果，js轮播图实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了原生JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了js图片轮播手动切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要为大家详细介绍了javascript实现简易的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了基于BootStrap实现简洁注册界面,需要的朋友可以参考下2017-07-07
JavaScript知识点总结(十一)之js中的Object类详解
这篇文章主要介绍了JavaScript知识点总结(十一)之js中的Object类详解的相关资料,需要的朋友可以参考下2016-05-05
IntersectionObserver判断是否在可视区域详解
这篇文章主要为大家介绍了IntersectionObserver判断是否在可视区域详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了JavaScript多种页面刷新方法小结，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
最新评论