jQuery焦點圖插件SaySlide

先來介紹SaySlide 2.0支持自定義如下功能：
1、上下左右方向播放以及jQuery的fadeOut、slideUp、hide效果；
2、自動播放時間間隔和動畫播放的的速度；
3、是否顯示標題；
4、是否在新窗口打開鏈接；
5、是否顯示底部半透明背景；
6、按鈕在底部顯示的位置（左中右）；
7、按鈕默認背景色；
8、按鈕激活狀態顏色；
9、設置標題文字的樣式；
10、觸發按鈕的事件；
下面就是重點的代碼，分享給大家供大家參考，具體代碼如下
(function($){  $.fn.saySlide=function(options){    var defaults={      autoTime:3000,//自動播放時間間隔      speed:500,//切換速度      autodir:'RL',//自動播放方向，LR左到右，RL右到左，TB上到下，BT下到上, jQuery自帶的動畫：jq.fadeOut , jq.slideUp , jq.hide      isTitle:false,//是否顯示標題      isBlank:true,//是否在新窗口打開鏈接      isBottombg:true,//是否顯示底部半透明背景,該設置只有在isTitle為false生效      defaultBg:"#999999",//定義底部按鈕默認顏色      currentBg:"#ffffff",//定義底部按鈕激活狀態顏色      btnAlign:"center",//按鈕左中右位置，left,center,right      fontSize:"14px"    };    var _this=$(this), len=_this.children().length, _thisChildren;    options.Width=_this.width() || 0;    options.Height=_this.height() || 0;    options.Imgs=options.ImgsO=_this.children();    options.nowImg=0;    options.isLink = $(options.Imgs[0]).attr("href") === undefined ? false : true; //根據第一張圖片是否有href屬性來判斷是否給圖片加上鏈接    var options=$.extend(defaults,options);    switch(options.autodir){      case "LR":options.pos="right";break;      case "RL":options.pos="left";break;      case "BT":options.pos="top";break;      case "TB":options.pos="bottom";break;      default:        if(/jq//./.test(options.autodir)){          options.jq=options.autodir.slice(3);          options.autodir="jq";        }else{          alert("autodir參數不正確");        }    }    var SaySlide=function(opt){      this.opt=opt;    }    SaySlide.prototype={      _init:function(){        this.BulkImgs();        this.AutoPlay();        this.PausePlay();        this.BtnClick();      },      BoxBtn:function(){        var me=this.opt, boxHtml='';        for(var i=0;i<len;i++){          var bg=i==0?me.currentBg:me.defaultBg;          boxHtml+='<i style="background-color:'+ bg +'" index="'+ i +'"></i>';        }        var textAlign=me.isTitle==true ? "right" : me.btnAlign;        boxHtml='<div class="saySlide-bottom-btn" style="text-align:'+ textAlign +'"><span>'+ boxHtml +'</span></div>';        return boxHtml;      },      BulkImgs:function(){        var me=this.opt, ImgsArr=new Array;        for(var i=0;i<len;i++){          if(me.isLink===true){            var link=$(me.Imgs[i]).attr({"width":me.Width,"height":me.Height}).attr("href");            $(me.Imgs[i]).removeAttr("href");            ImgsArr[i]="<a href='"+ link +"' index='"+ i +"'>"+me.Imgs[i].outerHTML+'</a>';          }else{            $(me.Imgs[i]).attr({"width":me.Width,"height":me.Height});            ImgsArr[i]="<a index='"+ i +"'>"+me.Imgs[i].outerHTML+'</a>';          }        }                if(me.autodir=="LR" || me.autodir=="TB" || me.autodir=="jq"){          var ImgsStr=ImgsArr.reverse().join('');        }else{          var ImgsStr=ImgsArr.join('');        }        _this.html(ImgsStr);        me.Imgs=_this.children();        if(me.autodir!="jq"){          _this.wrapInner("<div class='saySlide-box' />");          _thisChildren=_this.children("div.saySlide-box");          var divWidth=me.autodir=="LR" || me.autodir=="RL" ? me.Width*len :me.Width;          _thisChildren.width(divWidth).css(me.pos,"0");        }else{          _this.addClass("saySlide-fade");        }        var opacityBg=me.isBottombg===true || me.isTitle===true ? '<div class="saySlide-opacity-bg"></div>' : '';//如果有標題，則透明背景強制顯示        _this.append(this.BoxBtn() + opacityBg);        me.BtnArr=_this.find("i");        if(me.isTitle===true){          this.BuildTitle();        }      },      /* 構造標題 */      BuildTitle:function(){        var _w=14*len, me=this.opt;        _w=me.Width - _w - 20 - 40;        _this.append('<div class="saySlide-title" />');        me.titleBox=_this.children("div.saySlide-title").css({"font-size":me.fontSize,width:_w});        me.titleBox.text($(me.ImgsO[0]).attr("alt"));      },      /* 自動播放 */      AutoPlay:function(){        var self=this, me=this.opt;        self.t=setInterval(function(){          self.PicPlay();        },me.autoTime);      },      /* 鼠標經過時清除定時 */      PausePlay:function(){        var self=this;        _this.hover(function(){          clearInterval(self.t);        },function(){          self.AutoPlay();        });      },      PicPlay:function(){        var me=this.opt;        if(me.autodir=="RL" || me.autodir=="BT"){          this.MoveV(me.autodir);        }else if(me.autodir=="LR" || me.autodir=="TB"){          this.MoveH(me.autodir);        }else if(me.autodir=="jq"){          this.MovejQ();        }        var current=me.nowImg > len-1 ? 0 : me.nowImg;        $(me.BtnArr[current]).css("background-color",me.currentBg).siblings().css("background-color",me.defaultBg);        if(me.isTitle===true){          me.titleBox.text($(me.ImgsO[current]).attr("alt"));        }      },      /* 點擊標簽按鈕 */      BtnClick:function(){        var self=this, me=this.opt;        _this.delegate("i","click",function(){          var clicked=parseInt($(this).attr("index"));          me.nowImg=clicked;          if(me.autodir=="RL" || me.autodir=="BT"){            var prevImgs=_thisChildren.find("a[index='"+ clicked +"']").prevAll();            prevImgs=$.makeArray(prevImgs).reverse();            _thisChildren.css(me.pos,"0");            $(prevImgs).appendTo(_thisChildren);          }else if(me.autodir=="LR" || me.autodir=="TB"){            var prevImgs=_thisChildren.find("a[index='"+ clicked +"']").nextAll();            _thisChildren.css(me.pos,"0");            $(prevImgs).prependTo(_thisChildren);                      }else if(me.autodir=="jq"){            var prevImgs=_this.find("a[index='"+ clicked +"']").nextAll("a");            prevImgs.prependTo(_this);          }          $(this).css("background-color",me.currentBg).siblings().css("background-color",me.defaultBg);        });             },      /* 從右到左播放 、 從下到上播放 */      MoveV:function(type){        var me=this.opt, current;        me.nowImg = me.nowImg+1 > len ? 1 : me.nowImg+1;        current = me.nowImg - 1;        if(type=="RL"){          _thisChildren.animate({"left":"-"+me.Width},me.speed,function(){            $(me.Imgs[current]).appendTo($(this));            $(this).css("left","0");          });        }else if(type=="BT"){          _thisChildren.animate({"top":"-"+me.Height},me.speed,function(){            $(me.Imgs[current]).appendTo($(this));            $(this).css("top","0");          });        }      },      /* 淡入淡出 */      MovejQ:function(){        var me=this.opt, current;        me.nowImg = me.nowImg+1 > len-1 ? 0 : me.nowImg+1;        current = len - me.nowImg == len ? 0 : len-me.nowImg;        var arg1=me.speed;        var arg2=function(){$(this).prependTo(_this).show();};        if(me.jq=="fadeOut"){          $(me.Imgs[current]).fadeOut(arg1,arg2);        }else if(me.jq=="hide"){          $(me.Imgs[current]).hide(arg1,arg2);        }else if(me.jq=="slideUp"){          $(me.Imgs[current]).slideUp(arg1,arg2);        }else{          return ;        }      },      /* 從左到右播放 、 從上到下播放 */      MoveH:function(type){        var me=this.opt, current;        me.nowImg = me.nowImg+1 > len-1 ? 0 : me.nowImg+1;        current = len - me.nowImg == len ? 0 : len-me.nowImg;        if(type=="LR"){          _thisChildren.animate({"right":"-"+me.Width},me.speed,function(){            $(me.Imgs[current]).prependTo($(this));            $(this).css("right","0");          });        }else if(type=="TB"){          _thisChildren.animate({"bottom":"-"+me.Height},me.speed,function(){            $(me.Imgs[current]).prependTo($(this));            $(this).css("bottom","0");          });        }      }    }    var _SaySlide=new SaySlide(options);    _SaySlide._init();  }})(jQuery);
以上就是焦點圖插件SaySlide的代碼，對關鍵代碼進行注釋，希望對大家的學習有所幫助。