javascript 圖片輪換 函數(shù)化繼承
更新時(shí)間：2010年05月18日 01:31:19 作者：
一直讓我困擾的是，我不知道如何去讓這個(gè)效果 自動(dòng)播放，或者費(fèi)了很多周折。這可能叫初始化。
先看下前幾天的動(dòng)畫(huà)是如何構(gòu)造JS的：
var photo=function(){
var index=0,a,b,c,d;
return {
show:function(){},
auto:function(){}
}
}
var aa=photo();
//基本上是 用return 返回了一些方法。
// 1：無(wú)法初始化就執(zhí)行 auto。
// 2:在初始化的時(shí)候，我沒(méi)辦法把this指向aa。
//上面兩個(gè)問(wèn)題，會(huì)很不方便。
1：我不愿意讓自己去這洋寫(xiě)：
var aa=photo("id");
aa.auto()//多一句話(huà)，很不好看。
理想狀態(tài)是我在
var aa=photo("id")的時(shí)候就告訴程序是否自動(dòng)播放。
2：如果有兩個(gè)動(dòng)畫(huà)在同一個(gè)頁(yè)面。
比如：
var aa=photo("id1");
aa.auto()
var bb=photo("id2");
bb.auto()
那么他們都有用戶(hù)控制動(dòng)畫(huà)的A標(biāo)簽，如何各自負(fù)責(zé)自己的動(dòng)畫(huà)。不互相干擾。（其實(shí)他涉及到私有變量的問(wèn)題，還有this指向）;
申明：網(wǎng)上有很多解決上面問(wèn)題的方法。下面的只是我弄明白了。所以來(lái)給大家分享，高手見(jiàn)笑了。
不錯(cuò)，又是在公車(chē)上，我解決了這個(gè)問(wèn)題。《javascript語(yǔ)言精粹》第52頁(yè) 5.4函數(shù)化
我來(lái)看一下這個(gè) 函數(shù)化構(gòu)造器的源代碼：
//加粗表示強(qiáng)調(diào)
//這個(gè)方法是 《javascript語(yǔ)言精粹》第52頁(yè) 5.4函數(shù)化 上的。
var constructor = function (spec,my){
var that,其他的私有實(shí)例變量;
my = my || {};
把共享的變量和函數(shù)添加到my中
that = 一個(gè)新對(duì)象
添加給that 的特權(quán)方法
return that;
}
看下面的方法：
var photo = function(spec){
var _this={},index,a,c,d;
//這里可以初始化用戶(hù)控制的a標(biāo)簽
//比如這洋
a.onmouseover=function(){
_this.go();//可以調(diào)用哦
}
_this.show=function(){};
_this.auto=function(){};
_this.go=function(){};
// 這里可以直接調(diào)用剛才申明好的方法
_this.auto()//可以直接調(diào)用
return _this;
}
var bb=photo({index:1;});
var aa=photo({index:2});
//上面創(chuàng)建了 bb aa 兩個(gè)不同的動(dòng)畫(huà)，不會(huì)互相影響哦。
// 如果我對(duì)javascript語(yǔ)言精粹 的函數(shù)化 理解有問(wèn)題。還請(qǐng)指教...
最后這個(gè)動(dòng)畫(huà)就比較完美了?？墒撬接凶兞刻嗔恕Ｈ绻梢栽O(shè)置默認(rèn)值，可以使用者選擇性的傳進(jìn)來(lái)。會(huì)比較好
所以可以添加下面這個(gè)函數(shù)：（這是很多人都使用的啦）
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
// 看到 Extend 大家都知道 他是做什么用的了。
最后貼出我今天寫(xiě)的這個(gè) 圖片輪換的源代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
var photo=function(){
var index=0,a,b,c,d;
return {
show:function(){},
auto:function(){}
}
}
var aa=photo();
//基本上是 用return 返回了一些方法。
// 1：無(wú)法初始化就執(zhí)行 auto。
// 2:在初始化的時(shí)候，我沒(méi)辦法把this指向aa。
//上面兩個(gè)問(wèn)題，會(huì)很不方便。
1：我不愿意讓自己去這洋寫(xiě)：
復(fù)制代碼 代碼如下:
var aa=photo("id");
aa.auto()//多一句話(huà)，很不好看。
理想狀態(tài)是我在
var aa=photo("id")的時(shí)候就告訴程序是否自動(dòng)播放。
2：如果有兩個(gè)動(dòng)畫(huà)在同一個(gè)頁(yè)面。
比如：
復(fù)制代碼 代碼如下:
var aa=photo("id1");
aa.auto()
var bb=photo("id2");
bb.auto()
那么他們都有用戶(hù)控制動(dòng)畫(huà)的A標(biāo)簽，如何各自負(fù)責(zé)自己的動(dòng)畫(huà)。不互相干擾。（其實(shí)他涉及到私有變量的問(wèn)題，還有this指向）;
申明：網(wǎng)上有很多解決上面問(wèn)題的方法。下面的只是我弄明白了。所以來(lái)給大家分享，高手見(jiàn)笑了。
不錯(cuò)，又是在公車(chē)上，我解決了這個(gè)問(wèn)題。《javascript語(yǔ)言精粹》第52頁(yè) 5.4函數(shù)化
我來(lái)看一下這個(gè) 函數(shù)化構(gòu)造器的源代碼：
//加粗表示強(qiáng)調(diào)
//這個(gè)方法是 《javascript語(yǔ)言精粹》第52頁(yè) 5.4函數(shù)化 上的。
var constructor = function (spec,my){
var that,其他的私有實(shí)例變量;
my = my || {};
把共享的變量和函數(shù)添加到my中
that = 一個(gè)新對(duì)象
添加給that 的特權(quán)方法
return that;
}
看下面的方法：
復(fù)制代碼 代碼如下:
var photo = function(spec){
var _this={},index,a,c,d;
//這里可以初始化用戶(hù)控制的a標(biāo)簽
//比如這洋
a.onmouseover=function(){
_this.go();//可以調(diào)用哦
}
_this.show=function(){};
_this.auto=function(){};
_this.go=function(){};
// 這里可以直接調(diào)用剛才申明好的方法
_this.auto()//可以直接調(diào)用
return _this;
}
var bb=photo({index:1;});
var aa=photo({index:2});
//上面創(chuàng)建了 bb aa 兩個(gè)不同的動(dòng)畫(huà)，不會(huì)互相影響哦。
// 如果我對(duì)javascript語(yǔ)言精粹 的函數(shù)化 理解有問(wèn)題。還請(qǐng)指教...
最后這個(gè)動(dòng)畫(huà)就比較完美了?？墒撬接凶兞刻嗔恕Ｈ绻梢栽O(shè)置默認(rèn)值，可以使用者選擇性的傳進(jìn)來(lái)。會(huì)比較好
所以可以添加下面這個(gè)函數(shù)：（這是很多人都使用的啦）
復(fù)制代碼 代碼如下:
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
// 看到 Extend 大家都知道 他是做什么用的了。
最后貼出我今天寫(xiě)的這個(gè) 圖片輪換的源代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
利用OpenAI?ChatGPT進(jìn)行編碼嘗試體驗(yàn)
這幾天chatgpt可是非常火的,下面這篇文章主要給大家介紹了關(guān)于利用OpenAI?ChatGPT進(jìn)行編碼嘗試體驗(yàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
js中實(shí)現(xiàn)多態(tài)采用和繼承類(lèi)似的方法
首先定義一個(gè)抽象類(lèi)，其中調(diào)用一些虛方法，虛方法在抽象類(lèi)中沒(méi)用定義，而是通過(guò)其具體的實(shí)現(xiàn)類(lèi)來(lái)實(shí)現(xiàn)2014-08-08
簡(jiǎn)單實(shí)現(xiàn)js無(wú)縫滾動(dòng)效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js無(wú)縫滾動(dòng)效果，js輪播圖實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
原生JavaScript實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了js圖片輪播手動(dòng)切換特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
基于BootStrap實(shí)現(xiàn)簡(jiǎn)潔注冊(cè)界面
這篇文章主要介紹了基于BootStrap實(shí)現(xiàn)簡(jiǎn)潔注冊(cè)界面,需要的朋友可以參考下2017-07-07
JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類(lèi)詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類(lèi)詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了JavaScript多種頁(yè)面刷新方法小結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04