无为清净楼资源网 Design By www.qnjia.com
先来介绍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 "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"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" "0"); }else{ _this.addClass("saySlide-fade"); } var opacityBg=me.isBottombg===true || me.isTitle===true "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 "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 "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 "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 "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的代码,对关键代码进行注释,希望对大家的学习有所帮助。
标签:
jQuery,焦点图
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴!万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]
- 群星《妙音纪念珍藏版》蓝光BSCD[WAV+CUE][1G]
- 【发烧试音】蔡克信严讯人间天籁》[原抓WAV+CUE]
- [ABC唱片]山姆泰勒《西电之声·萨克斯风》[低速原抓WAV+CUE]
- 童丽《微风细雨XRCD2》[原抓WAV+CUE]
- 群星 《车乐坊1》DTS魔音[WAV+CUE][1.7G]
- 邓丽君.2024 -《生誕70年ベスト?アルバム 沒後30年》环球日版 [WAV+分轨][993M]
- 群星《一人一首成名曲》1998 台湾金碟珍藏版[WAV+CUE][1.1G]
- 陈百强2024-《凝望》头版限量编号MQA-UHQCD[WAV+CUE]
- 测试示范《监听天碟3》头版限量编号LECD[WAV+CUE]
- 陈瑞《爱你到天荒地老HQ》头版限量[低速原抓WAV+CUE]
- 徐小凤 《徐小凤殿堂18首》24K金碟[WAV+CUE]
- 保时捷原厂车载爆棚动态试音碟《Panamera_Soundtrack》DTS[WAV分轨][1G]