jQuery焦点图插件SaySlide
更新时间:2015年12月24日 10:01 点击:1294
先来介绍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的代码,对关键代码进行注释,希望对大家的学习有所帮助。
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
- 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图...2015-10-30
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23- jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效,分享给大家,具体如下效果图:具体代码如下:html代码: <section class="strips"> <article class="strips__strip"> <di...2015-11-24
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自...2015-10-30
- 在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的....2016-04-27
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按...2015-10-23