【分享】 图片轮换--函数化继承
不知道叫函数化继承有没有问题。请指点....
先看下今天的图片轮换：
<!-------------------------------->
<!-------------------------------->
前几天写了一个图片轮换，
地址：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>
