先来介绍SaySlide 2.0支持自定义如下功能:
下面就是重点的代码,分享给大家供大家参考,具体代码如下
(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的代码,对关键代码进行注释,希望对大家的学习有所帮助。
本文地址:https://www.stayed.cn/item/21239
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我