javascript-焦点图实现（一）

知识点：

function 作为构造函数

prototyoe 原型对象的使用。

this 指向为指向类的当前实例。

类的使用，类的所有实例都指向同一个原型对象，原型只存在一份。

实例自身的值，放到构造函数，每次类的实例化都会能过构造函数，创建一个新的复本。

效果：

 

代码：

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>

javascript:

<script>

/*
    此焦点图代码用于示例，完成基本的演示功能，对于其它附加功能，在这里不与提供。
    代码未经过全面的测试，如有需要使用者请自行修改并测试。

    js代码：
    "_"：为私有属性，方法
    
*/
    
    //构造函数
    function Focus(focusItems,callBackFn,effectFn){
        this._focusItems=focusItems||[];//焦点项为数组
        this._callBackFn=callBackFn||function(){};//回调函数每次变化后调用
        this._effectFn=effectFn||function(index,items){
            for(var i=0,len=items.length;i<len;i++){
                items[i].style.display="none";    
            }
            items[index].style.display="block";
                
        }//效果函数，用于焦点切换时的效果
        this._currentIndex=0;//当前的焦点索引
        this.init();
    }
    
    //原型对象
    Focus.prototype={
        constructor:Focus,//指明构造函数
        init:function(){
            this.goto(0);    
        },
        addFousItem:function(obj){//添加焦点项 public
            if(!obj)return;
            if(typeof obj==="string"){
                obj=document.getElementById(obj);    
            }
            this._focusItem.push(obj);    
        },
        size:function(){//返回当前焦点项总长度
            return this._focusItems.length;    
        },
        _check:function(num){//检查边界
            return num<this.size()&&num>=0;    
        },
        getCurrentIndex:function(){//返回当前索引
            return this._currentIndex;    
        },
        setIndex:function(num){//num 在边界内则设置
            if(this._check(num)){
                this._currentIndex=num;
            }
        },
        goto:function(num){//设置到达的焦点项
            this.setIndex(num);
            this._effectFn&&this._effectFn.call(this,this._currentIndex,this._focusItems);
            this._callBackFn&&this._callBackFn.call(this,this._currentIndex,this._focusItems);
        },
        prev:function(){//下一焦点项
            var curIndex=this.getCurrentIndex();
            curIndex--;
            if(!this._check(curIndex)){
                curIndex=this.size();                
                curIndex--;
            }
            
            this.goto(curIndex);
        },
        next:function(){//上一焦点项
            var curIndex=this.getCurrentIndex();
            curIndex++;            
            if(!this._check(curIndex)){                
                curIndex=0;
            }
            this.goto(curIndex);    
        }
        
    }
</script>

<script>

//测试用，只完成基本测试，后期会陆续添加一些效果，并对上面的代码进行扩展

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 Focus(focusItems);
next.onclick=function(){
    fos.next();    
}
prev.onclick=function(){
    fos.prev();    
}
// 测试自动播放  setInterval(function(){fos.next()},3000)


</script>

未完待续。。。