javascript-焦点图实现（二）

知识点：

　　javascript的原型链继承

　　function A(){

     }

     A.prototype={

     }

    function B(){

　　　　A.call(this);//调用父类构造函数         

    }

    B.prototype=new A;//原型链继承

　 B.constructor=B;//重新设置构造函数

 

完成功能：　　

　　扩展Focus类 参见：http://www.cnblogs.com/wengxuesong/archive/2013/05/16/3081966.html

　　添加渐隐渐现效果

　　自动播放

　　停止播放

　　设置切换间隔

　　设置效果

代码：

<style>
#focus_view td{
    height:200px;
}

</style>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="focus_view">
  <tr>
    <td style="background:#f00; display:none;">&nbsp;</td>
    <td style="background:#ff0; display:none;">&nbsp;</td>
    <td style="background:#f0f; display:none;">&nbsp;</td>
    <td style="background:#0f0; display:none;">&nbsp;</td>
    <td style="background:#000; display:none;">&nbsp;</td>
    <td style="background:#00f; display:none;">&nbsp;</td>
  </tr>
</table>
<button id="focus_prev">上一项</button><button id="focus_next">下一项</button>

<script>

/*
    导入 Focus类 *必需
    以下代码为不支持IE
    继承自Focus类，新添加方法
    play,//播放
    stop,//停止
    setSpeed,//间隔
    setEffect//效果
*/
var FocusOpacity=function(options){
    this._focusItems=options.focusItems;
    this.autoPlay=options.autoPlay||true;
    this._speed=options.speed||3000;
    this._interval=null;
    this.play();
    this.init();
    Focus.call(this,this._focusItems,options.callBackFn,options.effectFn);
}
FocusOpacity.prototype=Focus.prototype;//Focus构造函数里有运行的数据，直接用类原型对象。（重构时解决）
FocusOpacity.prototype.constructor=FocusOpacity;
FocusOpacity.prototype.setSpeed=function(speed){
    this._speed=speed;
}
FocusOpacity.prototype.play=function(){
    var that=this;
    that._interval=    setInterval(function(){that.next()},that._speed)
}
FocusOpacity.prototype.stop=function(){
    this._interval&&clearInterval(this._interval)    
}
FocusOpacity.prototype.setEffect=function(fun){
    this._effectFn=fun;
}

//添加每项切换时的过滤动画
function playEffect(index,arr){    
    for(var i=0,len=arr.length;i<len;i++){
        arr[i].style.display="none";    
    }
    arr[index].style.display="block";
    var playTime,old=0;
    function play(){        
        old+=0.01
        if(old>1){
            arr[index].style.opacity=1;
            return clearTimeout(playTime);
        };
        arr[index].style.opacity=old;        
        playTime=setTimeout(function(){
            play();
        },1);    
    }
    play();
}


//以下为测试代码

var prev=document.getElementById("focus_prev");
var next=document.getElementById("focus_next");

var focusView=document.getElementById("focus_view");
var focusItems=focusView.getElementsByTagName("td");

//声明
var fos=new FocusOpacity({'focusItems':focusItems});
//设置切换效果
fos.setEffect(playEffect);

//后一项
next.onclick=function(){
    fos.next();    
}
//前一项
prev.onclick=function(){
    fos.prev();    
}
//停止
focusView.onmouseover=function(){
    fos.stop();    
}
//播放
focusView.onmouseout=function(){
    fos.play();    
}

</script>

下面就要对现有的两段代码进行重构。

以使结构更合理，方便以后扩展。

未完待续。。。