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

　　添加渐隐渐现效果

　　自动播放

　　停止播放

　　设置切换间隔

　　设置效果

代码：

  1 <style>
  2 #focus_view td{
  3     height:200px;
  4 }
  5 
  6 </style>
  7 <table width="500" border="0" cellspacing="0" cellpadding="0" id="focus_view">
  8   <tr>
  9     <td style="background:#f00; display:none;">&nbsp;</td>
 10     <td style="background:#ff0; display:none;">&nbsp;</td>
 11     <td style="background:#f0f; display:none;">&nbsp;</td>
 12     <td style="background:#0f0; display:none;">&nbsp;</td>
 13     <td style="background:#000; display:none;">&nbsp;</td>
 14     <td style="background:#00f; display:none;">&nbsp;</td>
 15   </tr>
 16 </table>
 17 <button id="focus_prev">上一项</button><button id="focus_next">下一项</button>
 18 
 19 <script>
 20 
 21 /*
 22     导入 Focus类 *必需
 23     以下代码为不支持IE
 24     继承自Focus类，新添加方法
 25     play,//播放
 26     stop,//停止
 27     setSpeed,//间隔
 28     setEffect//效果
 29 */
 30 var FocusOpacity=function(options){
 31     this._focusItems=options.focusItems;
 32     this.autoPlay=options.autoPlay||true;
 33     this._speed=options.speed||3000;
 34     this._interval=null;
 35     this.play();
 36     this.init();
 37     Focus.call(this,this._focusItems,options.callBackFn,options.effectFn);
 38 }
 39 FocusOpacity.prototype=Focus.prototype;//Focus构造函数里有运行的数据，直接用类原型对象。（重构时解决）
 40 FocusOpacity.prototype.constructor=FocusOpacity;
 41 FocusOpacity.prototype.setSpeed=function(speed){
 42     this._speed=speed;
 43 }
 44 FocusOpacity.prototype.play=function(){
 45     var that=this;
 46     that._interval=    setInterval(function(){that.next()},that._speed)
 47 }
 48 FocusOpacity.prototype.stop=function(){
 49     this._interval&&clearInterval(this._interval)    
 50 }
 51 FocusOpacity.prototype.setEffect=function(fun){
 52     this._effectFn=fun;
 53 }
 54 
 55 //添加每项切换时的过滤动画
 56 function playEffect(index,arr){    
 57     for(var i=0,len=arr.length;i<len;i++){
 58         arr[i].style.display="none";    
 59     }
 60     arr[index].style.display="block";
 61     var playTime,old=0;
 62     function play(){        
 63         old+=0.01
 64         if(old>1){
 65             arr[index].style.opacity=1;
 66             return clearTimeout(playTime);
 67         };
 68         arr[index].style.opacity=old;        
 69         playTime=setTimeout(function(){
 70             play();
 71         },1);    
 72     }
 73     play();
 74 }
 75 
 77 
 78 //以下为测试代码
 79 
 80 var prev=document.getElementById("focus_prev");
 81 var next=document.getElementById("focus_next");
 82 
 83 var focusView=document.getElementById("focus_view");
 84 var focusItems=focusView.getElementsByTagName("td");
 85 
 86 //声明
 87 var fos=new FocusOpacity({'focusItems':focusItems});
 88 //设置切换效果
 89 fos.setEffect(playEffect);
 90 
 91 //后一项
 92 next.onclick=function(){
 93     fos.next();    
 94 }
 95 //前一项
 96 prev.onclick=function(){
 97     fos.prev();    
 98 }
 99 //停止
100 focusView.onmouseover=function(){
101     fos.stop();    
102 }
103 //播放
104 focusView.onmouseout=function(){
105     fos.play();    
106 }
107 
115 </script>

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

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

未完待续。。。 

 

转载于:https://www.cnblogs.com/wengxuesong/archive/2013/05/17/3084143.html