热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery焦点图插件SaySlide

这篇文章主要介绍了jQuery焦点图插件SaySlide,新版的SaySlide2.0重构了代码,并基本上保留了原有的功能,感兴趣的小伙伴们可以参考一下

先来介绍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.| 0;
    options.| 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';
        }
        var textAlign=me.isTitle==true ? "right" : me.btnAlign;
        boxHtml='
'+ boxHtml +'
'; return boxHtml; }, BulkImgs:function(){ var me=this.opt, ImgsArr=new Array; for(var i=0;i"+me.Imgs[i].outerHTML+''; }else{ $(me.Imgs[i]).attr({"width":me.Width,"height":me.Height}); ImgsArr[i]=""+me.Imgs[i].outerHTML+''; } } 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("
"); _thisChildren=_this.children("div.saySlide-box"); var divLR" || 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 ? '
' : '';//如果有标题,则透明背景强制显示 _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('
'); 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的代码,对关键代码进行注释,希望对大家的学习有所帮助。


推荐阅读
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
author-avatar
手机用户2502941531
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有