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不可用的问题探究
Oct 01 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
javascript实现yield的方法
Nov 06 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
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/17 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
优化javascript的执行速度
2010/01/23 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
三个儿子教学反思
2014/02/03 职场文书
我的小天地教学反思
2014/04/30 职场文书
说明书怎么写
2014/05/06 职场文书
房展策划方案
2014/06/07 职场文书
公司委托书怎么写
2014/08/02 职场文书
植物生产学专业求职信
2014/08/08 职场文书
团队会宣传标语
2014/10/09 职场文书
高考升学宴答谢词
2015/01/20 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python