jQuery焦点图插件SaySlide
先来介绍SaySlide2.0支持自定义如下功能：
- 1、上下左右方向播放以及jQuery的fadeOut、slideUp、hide效果；
- 2、自动播放时间间隔和动画播放的的速度；
- 3、是否显示标题；
- 4、是否在新窗口打开链接；
- 5、是否显示底部半透明背景；
- 6、按钮在底部显示的位置（左中右）；
- 7、按钮默认背景色；
- 8、按钮激活状态颜色；
- 9、设置标题文字的样式；
- 10、触发按钮的事件；
下面就是重点的代码，分享给大家供大家参考，具体代码如下
(function($){
$.fn.saySlide=function(options){
vardefaults={
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属性来判断是否给图片加上链接
varoptions=$.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参数不正确");
}
}
varSaySlide=function(opt){
this.opt=opt;
}
SaySlide.prototype={
_init:function(){
this.BulkImgs();
this.AutoPlay();
this.PausePlay();
this.BtnClick();
},
BoxBtn:function(){
varme=this.opt,boxHtml='';
for(vari=0;i<len;i++){
varbg=i==0?me.currentBg:me.defaultBg;
boxHtml+='<istyle="background-color:'+bg+'"index="'+i+'"></i>';
}
vartextAlign=me.isTitle==true?"right":me.btnAlign;
boxHtml='<divclass="saySlide-bottom-btn"style="text-align:'+textAlign+'"><span>'+boxHtml+'</span></div>';
returnboxHtml;
},
BulkImgs:function(){
varme=this.opt,ImgsArr=newArray;
for(vari=0;i<len;i++){
if(me.isLink===true){
varlink=$(me.Imgs[i]).attr({"width":me.Width,"height":me.Height}).attr("href");
$(me.Imgs[i]).removeAttr("href");
ImgsArr[i]="<ahref='"+link+"'index='"+i+"'>"+me.Imgs[i].outerHTML+'</a>';
}else{
$(me.Imgs[i]).attr({"width":me.Width,"height":me.Height});
ImgsArr[i]="<aindex='"+i+"'>"+me.Imgs[i].outerHTML+'</a>';
}
}
if(me.autodir=="LR"||me.autodir=="TB"||me.autodir=="jq"){
varImgsStr=ImgsArr.reverse().join('');
}else{
varImgsStr=ImgsArr.join('');
}
_this.html(ImgsStr);
me.Imgs=_this.children();
if(me.autodir!="jq"){
_this.wrapInner("<divclass='saySlide-box'/>");
_thisChildren=_this.children("div.saySlide-box");
vardivWidth=me.autodir=="LR"||me.autodir=="RL"?me.Width*len:me.Width;
_thisChildren.width(divWidth).css(me.pos,"0");
}else{
_this.addClass("saySlide-fade");
}
varopacityBg=me.isBottombg===true||me.isTitle===true?'<divclass="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('<divclass="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(){
varself=this,me=this.opt;
self.t=setInterval(function(){
self.PicPlay();
},me.autoTime);
},
/*鼠标经过时清除定时*/
PausePlay:function(){
varself=this;
_this.hover(function(){
clearInterval(self.t);
},function(){
self.AutoPlay();
});
},
PicPlay:function(){
varme=this.opt;
if(me.autodir=="RL"||me.autodir=="BT"){
this.MoveV(me.autodir);
}elseif(me.autodir=="LR"||me.autodir=="TB"){
this.MoveH(me.autodir);
}elseif(me.autodir=="jq"){
this.MovejQ();
}
varcurrent=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(){
varself=this,me=this.opt;
_this.delegate("i","click",function(){
varclicked=parseInt($(this).attr("index"));
me.nowImg=clicked;
if(me.autodir=="RL"||me.autodir=="BT"){
varprevImgs=_thisChildren.find("a[index='"+clicked+"']").prevAll();
prevImgs=$.makeArray(prevImgs).reverse();
_thisChildren.css(me.pos,"0");
$(prevImgs).appendTo(_thisChildren);
}elseif(me.autodir=="LR"||me.autodir=="TB"){
varprevImgs=_thisChildren.find("a[index='"+clicked+"']").nextAll();
_thisChildren.css(me.pos,"0");
$(prevImgs).prependTo(_thisChildren);
}elseif(me.autodir=="jq"){
varprevImgs=_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){
varme=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");
});
}elseif(type=="BT"){
_thisChildren.animate({"top":"-"+me.Height},me.speed,function(){
$(me.Imgs[current]).appendTo($(this));
$(this).css("top","0");
});
}
},
/*淡入淡出*/
MovejQ:function(){
varme=this.opt,current;
me.nowImg=me.nowImg+1>len-1?0:me.nowImg+1;
current=len-me.nowImg==len?0:len-me.nowImg;
vararg1=me.speed;
vararg2=function(){$(this).prependTo(_this).show();};
if(me.jq=="fadeOut"){
$(me.Imgs[current]).fadeOut(arg1,arg2);
}elseif(me.jq=="hide"){
$(me.Imgs[current]).hide(arg1,arg2);
}elseif(me.jq=="slideUp"){
$(me.Imgs[current]).slideUp(arg1,arg2);
}else{
return;
}
},
/*从左到右播放、从上到下播放*/
MoveH:function(type){
varme=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");
});
}elseif(type=="TB"){
_thisChildren.animate({"bottom":"-"+me.Height},me.speed,function(){
$(me.Imgs[current]).prependTo($(this));
$(this).css("bottom","0");
});
}
}
}
var_SaySlide=newSaySlide(options);
_SaySlide._init();
}
})(jQuery);
以上就是焦点图插件SaySlide的代码，对关键代码进行注释，希望对大家的学习有所帮助。