Home > Web Front-end > JS Tutorial > body text

jQuery focus map plugin SaySlide_jquery

WBOY
Release: 2016-05-16 15:24:22
Original
1200 people have browsed it

先来介绍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&#63;me.currentBg:me.defaultBg;
          boxHtml+='<i style="background-color:'+ bg +'" index="'+ i +'"></i>';
        }
        var textAlign=me.isTitle==true &#63; "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" &#63; 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 &#63; '<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 &#63; 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 &#63; 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 &#63; 0 : me.nowImg+1;
        current = len - me.nowImg == len &#63; 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 &#63; 0 : me.nowImg+1;
        current = len - me.nowImg == len &#63; 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);
Copy after login

以上就是焦点图插件SaySlide的代码,对关键代码进行注释,希望对大家的学习有所帮助。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template