demo22-面向对象处理轮播图

 1 <script>
 2     //父类私有和扩展
 3     function Fu(a, b) {
 4         this.oP = a;
 5         this.oImg = b;
 6         this.length = a.length;
 7         this.lastIndex = 0;
 8         this.init();
 9     }
10     Fu.prototype = {
11         init: function () {
12             var This = this;
13             for (var i = 0; i < this.length; i++) {
14                 this.oP[i].i = i;
15                 this.oP[i].onclick = function () {
16                     var m = this.i;
17                     This.change(function () {//1.1function(){}指向window
18                         this.lastIndex = m;
19                     });
20 //                    This.change(function(){//
21 //                        this.lastIndex=m;
22 //                    }.bind(This));//2.1或者这样指向Fu
23                 }
24             }
25         },
26         change: function (fn) {
27             this.oP[this.lastIndex].className = "";
28             this.oImg[this.lastIndex].className = "";
29             fn.call(this);//1.2是调用的change参数function(){}指向Fu;2.2fn();
30             this.oP[this.lastIndex].className = "active";
31             this.oImg[this.lastIndex].className = "active";
32 
33         }
34     };
35     //子类私有和扩展
36     function Sn(a,b,c) {
37         Fu.call(this,a,b);//Fu.apply([].slice.call(arguments));
38         this.bDiv = c;
39         this.btn();
40     }
41     function Mid(){}
42     Mid.prototype=Fu.prototype;
43 //    Sn.prototype.constructor = Sn;
44     Sn.prototype=new Mid();
45     Sn.prototype.btn = function () {
46         var This=this;
47         for(var i=0;i< this.bDiv.length;i++){
48             this.bDiv[i].i=i;
49             this.bDiv[i].onclick=function(){
50                 var index = this.i;
51                 This.change(function(){//index就0和1,左右两个btn,右加左减
52                     if(index){
53                         this.lastIndex++;
54                         this.lastIndex%=this.length;
55                     }else{
56                         this.lastIndex--;
57                         if( this.lastIndex<0) this.lastIndex=this.length-1;//小于0取最后一张
58                     }
59                 });
60             };
61         }
62     };
63     (function () {
64         var oP = document.querySelectorAll("#nod p"),
65                 oImg = document.querySelectorAll("#lol li img");
66         new Fu(oP, oImg);
67     })();
68     (function () {
69         var oTab = document.querySelectorAll("#tab p"),
70                 aImg = document.querySelectorAll("#peo li img"),
71             oBtn=document.querySelectorAll("#btn div");
72         new Sn(oTab, aImg,oBtn);
73     })();
74 </script>