• 又一款 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         }



     

  • 相关阅读:
    Map,Multimap,Set,MultiSet,Hash_Map,Hash_Set,Share_ptr的区分
    mjpgstreamer源码分析
    S3C2410x介绍
    V4L2应用程序框架
    V4L2驱动框架
    Linux 视频设备驱动V4L2最常用的控制命令使用说明
    (转)在eclipse中查看android SDK的源代码
    [经验技巧] 利用WindowsPhone7_SDK_Full.rar_for_xp,在xp下安装sdk,部署xap软件的教程
    (收藏)智能手机开发
    Html5相关文章链接
  • 原文地址:https://www.cnblogs.com/trance/p/1762013.html
Copyright © 2020-2023  润新知