首页 > 编程 > JavaScript > 正文

jQuery焦点图插件SaySlide

2019-11-20 10:58:11
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表