jQuery焦点图插件SaySlide


Posted in Javascript onDecember 21, 2015

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

Javascript 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
jquery 选择器部分整理
Oct 28 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
Flow之一个新的Javascript静态类型检查器
Dec 21 #Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 #Javascript
浅析JavaScript声明变量
Dec 21 #Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 #Javascript
深入浅析Node.js 事件循环
Dec 20 #Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 #Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 #Javascript
You might like
PHP里的中文变量说明
2011/07/23 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
部队领导证婚词
2014/01/12 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
python实现手机推送 代码也就10行左右
2022/04/12 Python
Java设计模式之代理模式
2022/04/22 Java/Android