【分享】 图片轮换--函数化继承

不知道叫函数化继承有没有问题。请指点....

先看下今天的图片轮换：

<!-------------------------------->

• 
• 
• 
• 
• 

1 2 3 4 5

• 
• 
• 
• 

1 2 3 4

<!-------------------------------->

 

前几天写了一个图片轮换，

地址：http://www.cnblogs.com/idche/archive/2010/05/13/1734559.html

一直让我困扰的是，我不知道如何去让这个效果 自动播放，或者费了很多周折。这可能叫初始化。

先看下前几天的动画是如何构造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 大家都知道 他是做什么用的了。

 

 

最后贴出我今天写的这个 图片轮换的源代码：

 

全部源代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
</ head >

< body >
< style type ="text/css" >
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 ; }
</ style >
< div style ="width:610px;height:210px;overflow:hidden; margin:10px; border:1px solid #000;" >
< div id ="div" >
< ul id ="photo" style ="margin-top:0px;" >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img1.jpg" /></ li >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img2.jpg" /></ li >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img3.jpg" /></ li >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img4.jpg" /></ li >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img5.jpg" /></ li >
</ ul >
</ div >
< div class ="number-warp" id ="number" >
< a href ="#" class ="sel" > 1 </ a >
< a href ="#" > 2 </ a >
< a href ="#" > 3 </ a >
< a href ="#" > 4 </ a >
< a href ="#" > 5 </ a >
</ div >
</ div >


< div style ="width:610px;height:210px;overflow:hidden; margin:10px; border:1px solid #000;" >
< div id ="div" >
< ul id ="photo2" style ="margin-top:0px;" >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img1.jpg" /></ li >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img2.jpg" /></ li >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img3.jpg" /></ li >
< li >< img src ="http://images.cnblogs.com/cnblogs_com/idche/245996/r_img4.jpg" /></ li >
</ ul >
</ div >
< div class ="number-warp" id ="number2" >
< a href ="#" class ="sel" > 1 </ a >
< a href ="#" > 2 </ a >
< a href ="#" > 3 </ a >
< a href ="#" > 4 </ a >
</ div >
</ div >


< script type ="text/javascript" >

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 < a.length ;i ++ ){
a[i].onmouseover = ( function (i){
return function (){
_this.go(i)
}
})(i);
a[i].onmouseout = ( function (i){
return function (){
_this.auto()
}
})(i);
};

_this.show = function (n){
if ( typeof my.x == " number " ){
_this.stop();
}
var t = 0 ,n = n,b = parseInt(my.$.style.marginTop),c = n * my.change - b,
o = function (){
t ++ ;
if (t == my.d + 1 ){

_this.stop();

} else {

my.$.style.marginTop = tween(t,b,c,my.d) + " px " ;
my.x = setTimeout(o, 10 );
}

}

a[my.index].className = "" ;
a[n].className = " sel " ;
my.index = n;
o();

};
_this.stop = function (){
clearTimeout(my.x);my.x = null ;
};
_this.auto = function (){
_this = this ;
my.v = setInterval(autoo, 3000 );
};
_this.go = function (n){
clearInterval(my.v);
this .show(n);
};
if (my.au){_this.auto();};
return _this;
}

var bb = photo({$:document.getElementById( " photo2 " ),
number: " number2 " ,
change: - 210 ,
num: 3
});


var aa = photo({$:document.getElementById( " photo " ),
change: - 210 ,
number: " number " ,
num: 4
});


</ script >
</ body >
</ html >

 

 

 

转载于:https://www.cnblogs.com/idche/archive/2010/05/15/1735992.html