又一款 jQuery 头图切换形式

头图切换是非常常用的形式，无奈每天都会出现新的需求和形式。

写过直接用函数的，写过jQuery插件形式的，这次又有新的，换个写法吧

 

 

 1     $(document).ready(function(){
 2       trance.init()                   
 3     });
 4     
 5     var trance=new Object();
 6     trance={
 7         sidx:0,
 8         self:this,
 9         timr:false,
10         itvl:6000,
11         area:$("#ps1_fs1"),
12         panl:$("#tab-list"),
13         prev:$("#tab-list").find(".tab-back"),
14         next:$("#tab-list").find(".tab-forward"),
15         hdlr:$("#tab-list").find("li").slice(1 , 5),
16         hnow:$("#tab-list").find("li").eq(1),
17         mimg:$("#ps1_fs1").find("div.w"),
18         desp:$("#ps1_fs1").find("div.rotator-content"),
19         pnow:$("#ps1_fs1").find("div.w").eq(this.sidx),
20         dnow:$("#ps1_fs1").find("div.rotator-content").eq(this.sidx),
21         init:function(){
22             this.chng();
23             this.bindact();
24             this.actauto();
25             },
26         chng:function(){
27             this.hnow.html("<a href='#nogo'>"+this.hnow.text()+"<\/a>");
28             this.hnow=this.hdlr.eq(this.sidx);
29             this.hnow.html("<span>"+this.hnow.text()+"<\/span>");
30             this.pnow.hide();
31             this.dnow.hide();
32             this.pnow=this.mimg.eq(this.sidx);
33             this.dnow=this.desp.eq(this.sidx);
34             this.pnow.show();
35             this.dnow.show();            
36             },
37         bindact:function(){
38             var _self=this;
39             this.hdlr.bind("click",function(){
40                 var idx=$(this).index()-1;
41                 if(idx==_self.sidx) return;
42                 _self.sidx=idx;
43                 _self.chng();
44                 });
45             this.prev.bind("click",function(){
46                  _self.sidx--;
47                 if(_self.sidx<0) _self.sidx=3;
48                 _self.chng();    
49                 });
50             this.next.bind("click",function(){
51                 _self.sidx++;
52                 if(_self.sidx>3) _self.sidx=0;
53                 _self.chng();        
54                 });
55             this.area.hover(
56                 function(){
57                 _self.clearauto();
58                 },
59                 function(){
60                 _self.actauto();    
61                 });
62             },
63         actauto:function(){
64             var _self=this;
65             this.timr=setInterval(function(){_self.next.click()} , _self.itvl);
66             },
67         clearauto:function(){
68             var _self=this;
69             if(_self.timr){
70                 clearInterval(_self.timr);
71                 _self.timr=false;
72                 }
73             }    
74         }