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的代码,对关键代码进行注释,希望对大家的学习有所帮助。