前言

jQuery是一个功能强大的库，提供了开发JavaScript项目所需的所有核心函数。很多时候我们使用jQuery的原因就是因为其使用插件的功能，然而，有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。我们知道， jQuery库是为了加快JavaScript的开发速度而设计的，通过简化编写JavaScript的方式，减少代码量。所以，今天就带大家了解一下jQuery自定义插件以及自定义插件案例---banner图滚动。

一、自定义插件

自定义插件一般有两种类型：全局插件和局部插件；接下来，先了解一下这两种插件；

1、全局插件声明——为扩展jQuery类本身.为类添加新的方法。
    $.extend({
     func:function(){}  // func -->插件名
    })；
   
    全局插件调用：
    $.func();

定义一个全局变量，其实就是在$.extend中定义对象里面的方法进行编译自己想要得到的功能插件，并留出想要的变量接口；

举个小例子：

JS:

<script type="text/javascript">

　　$.extend({

   　　 sayHello : function(){

       　　 alert("hello!!");

   　　 },

   　　 say : function(message){

     　　   alert("你说了："+message);

    　　}

　　});

  　　  $.sayHello();

   　　 $.say("hhahaha");

</script>

2、局部插件声明
    $.fn.func = function(){}
   
    局部插件调用
    $("选择器").func();

举个小例子：

JS：

<script type="text/javascript">

$.fn.setBgColor = function(bgColor){

                bgColor = bgColor?bgColor:"#ccc";  //设置默认值

                this.css("background-color",bgColor);

            }

            $("#div1").setBgColor("red");

            $.fn.setFont = function(obj){

                var defaults = {

                    "font-size" : "35px",

                    "font-weight" : "normal",

                    "font-family" : "宋体",

                    "color" : "#ccc"

                }

                //将默认值与传入的obj比对。并返回一个新对象。

                //如果obj里面有的属性，则使用obj属性。

                //如果obj没有声明的属性则使用默认值里面的属性

                var newObj =  $.extend(defaults, obj);

                this.css(newObj);

                //将调用当前函数的对象(this)返回，可以保证JQuery的链式语法

                return this;

            };3

            $("#div1").setFont({

                "font-size" : "20px",

                "font-weight" : "bold",

                "font-family" : "微软雅黑",

                "color" : "blue"

            });

        </script>

结果：

提醒：在上述的小例子中，在$.fn声明的插件函数中，可以使用this代指调用这个插件的的对象节点。
    而且，尤其要记住，this是一个JQuery对象，需要操作jQuery，千万不要用原生JS的DOM；

在上述的例子中，通过设置默认值来设置接口。通过调用插件，将所需设置的css样式设置在函数的odj中，并返回一个新对象从而实现功能；

二、自定义插件-banner图滚动

该插件实现banner滚动
 
 一、插件的属性：
 images:接受数组类型，数组的每个值应为对象。对象具有属性:src->图片的路径
 title->图片指上后的文字  href->图片指上后的跳转页面
 scrollTime:滚动时间，单位毫秒  5000
 bannerHeight：Banner图的高度
 
 iconColor：图片导航的颜色。默认white
 iconHoverColor：图片导航指上后的颜色。默认 orange
 iconPosition：图片导航的位置。可选left/right/center. 默认为center

1、小图标指上以后变色并且切换banner图

 通过：由span触发mouseover事件，则this指向这个span。
 但是，这this是JS对象，必须使用$封装成JQuery对象

 $(".scrollBanner-icon").mouseover(function(){

             $(".scrollBanner-icon").css("background-color",obj.iconColor);

             // 。

             $(this).css("background-color",obj.iconHoverColor);

              var index = $(this).attr("data-index");

              //将计数器count修改为index的值，让banner图滚动的定时器能够刚好滚到所指图片的下一张

              count = index;

             $(".scrollBanner-banner").css({

                 "transition": "none",

                 "margin-left":"-"+index+"00%"

             });

         });

效果：

3.2.1插件总代码

自定义banner图效果

HTML代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>自定义插件实现banner图滚动</title>

        <script src="JS/jquery-3.1.1.js" type="text/javascript"></script>

        <script src="JS/jquery-acrollBanner.js"type="text/javascript"></script>

    </head>

    <body>

        <div id="banner"></div>

<script type="text/javascript">

    $("#banner").scrollBanner({

        images :[

        {src:"插件/img/banner01.png",title:"banner1",href:"http://www.baidu.com"},

        {src:"插件/img/banner02.png",title:"banner2",href:"http://www.sina.com"},

        {src:"插件/img/banner03.png",title:"banner3",href:"http://www.baidu.com"},

        {src:"插件/img/banner04.png",title:"banner4",href:"http://www.baidu.com"},

                ]

            });

        </script>

    </body>

</html>

插件源码

 !function($){

     $.fn.scrollBanner = function(obj){

         // 声明各个属性的默认值,也就是设置插件可接收的接口

         var defaults = {

             images : [],

             scrollTime : 2000,

             bannerHeight : "500px",

             iconColor : "white",

             iconHoverColor : "orange",

             iconPosition : "center"

         }

         // 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性

         obj = $.extend(defaults,obj);

         console.log(obj);

         // 组件DOM布局

         $("body").css({"padding":"0px","margin" : "0px"});

         this.empty().append("<div class='scrollBanner-banner'></div>");

         $.each(obj.images,function(index,item){

             $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+item.href+"' target='_black'><img src='"+item.src+"' title='"+item.title+"' /></a></div>");

         });

         $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+obj.images[0].href+"' target='_black'><img src='"+obj.images[0].src+"' title='"+obj.images[0].title+"' /></a></div>");

         this.append("<div class='scrollBanner-icons'></div>");

         $.each(obj.images, function(index,item) {

             //data-*属性是H5允许用户自行在HTML标签上保存数据的属性。

             //保存在data-*中的数据，可以使用js读取调用

             $(".scrollBanner-icons").append("<span class='scrollBanner-icon' data-index ='"+index+"'></span>");

         });

         //设置css

         this.css({

             "width":"100%",

             "height":obj.bannerHeight,

             "overflow":"hidden",

             "position":"relative"

         });

         $(".scrollBanner-banner").css({

             "width":obj.images.length+1+"00%",

             "height":obj.bannerHeight,

             "transition": "all .5s ease"

         });

         $(".scrollBanner-bannerInner").css({

             "width" : 100/(obj.images.length+1)+"%",

             "height":obj.bannerHeight,

             "overflow":"hidden",

             "float":"left"

         });

         $(".scrollBanner-bannerInner img").css({

                 "width": "1920px",

                  "height":obj.bannerHeight,

                  "position": "relative",

                    "left": "50%",

                    "margin-left": "-960px"

         });

         $(".scrollBanner-icons").css({

             "position":"absolute",

             "z-index":"100",

             "width" :30*obj.images.length+"px",

             "bottom":"40px",

             "height":"7px"

         })

         switch (obj.iconPosition){

             case "left":

                 $(".scrollBanner-icons").css({

                     "left":"40px",

                 });

                 break;

             case "right":

                 $(".scrollBanner-icons").css({

                     "right":"40px",

                 });

                 break;

             case "center":

                 $(".scrollBanner-icons").css({

                     "left":"50%",

                     "margin-left":"-"+15*obj.images.length+"px"

                 });

                 break;

             default:

                 break;

         }

         $(".scrollBanner-icon").css({

                 "width": "15px",

                  "height": "5px",

                  "background-color": obj.iconColor,

                  "display": "inline-block",

                  "margin": "0px 5px"

         })

         //小图标指上以后变色并且切换banner图

         $(".scrollBanner-icon").mouseover(function(){

             $(".scrollBanner-icon").css("background-color",obj.iconColor);

             // ↓ 由span触发mouseover事件，则this指向这个span。

             // ↓ 但是，这this是JS对象，必须使用$封装成JQuery对象。

             $(this).css("background-color",obj.iconHoverColor);

              var index = $(this).attr("data-index");

              //将计数器count修改为index的值，让banner图滚动的定时器能够刚好滚到所指图片的下一张

              count = index;

             $(".scrollBanner-banner").css({

                 "transition": "none",

                 "margin-left":"-"+index+"00%"

             });

         });

         //实现banner滚动

         var count = 0 ;

         $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor);

         setInterval(function(){

             count++;

             $(".scrollBanner-banner").css({

                 "margin-left":"-"+count+"00%",

                 "transition": "all .5s ease"

             })

             $(".scrollBanner-icon").css("background-color",obj.iconColor);

             $(".scrollBanner-icon:eq("+count+")").css("background-color",obj.iconHoverColor);

             if (count>=obj.images.length) {

                 $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor);

             }

             if(count>obj.images.length){

                 count=0;

                 $(".scrollBanner-banner").css({

                 "margin-left":"0px",

                 "transition":"none"

                 })

             }

         },obj.scrollTime);

     }

 }(jQuery);

jQuery自定义插件--banner图滚动的更多相关文章

  1. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  2. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  3. 你的专属定制——JQuery自定义插件

        前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

  4. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  5. fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

    使用fullpage的步骤   1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...

  6. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  7. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

  8. jQuery自定义插件

    jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件,   ( ...

  9. 代码：jquery自定义插件 demo

    jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...

随机推荐

  1. Spring（四）-- JdbcTemplate、声明式事务

    1.Spring提供的一个操作数据库的技术JdbcTemplate,是对Jdbc的封装.语法风格非常接近DBUtils.   JdbcTemplate可以直接操作数据库,加快效率,而且学这个JdbcT ...

  2. 迈向angularjs2系列(1):typescript指南

    typescript指南 前言 typescript是angularjs2推荐使用的脚本语言.它由微软2012年首次发布. 一.    typescript和javascript的区别 1.从遵循的规 ...

  3. Java - 9个处理异常的最佳准则

    其实工作这么久了一直都没搞清楚到底如何来处理异常,偶然看到一篇外文感觉还不错,便把它翻译了下来,原文链接位于本文末尾处. 在java中处理异常并不是一件简单的事,不止初学者觉得它难以理解甚至连有经验的 ...

  4. Struts配置的各种视图转发类型

    上面是struts1的视图转发2中类型:1.内部请求转发(来定向到某个视图):2.浏览器重定向(来定向到某个视图). 浏览器重定向(直接访问路径)不能访问WEB-INF的jsp文件,只有服务器内部转发 ...

  5. 求最长公共前缀和后缀—基于KMP的next数组

    KMP算法最主要的就是计算next[]算法,但是我们知道next[]求的是当前字符串之前的子字符串的最大前后缀数,但是有的时候我们需要比较字符串中前后缀最大数,比如 LeetCode的shortest ...

  6. 数据库面试技巧，通过JDBC展示自己专业性，摘自java web轻量级开发面试教程

    这篇文章是我之前写的博文 数据库方面的面试技巧,如何从建表方面展示自己能力 和 面试技巧,如何通过索引说数据库优化能力,内容来自Java web轻量级开发面试教程是一个系列的,通过面试官的视角和大家分 ...

  7. Python教程百度网盘哪里有？

    Python为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数据库.文本等大量内容,被形象地称作"内置电池(batteries included)".带你快速入门的Py ...

  8. Day-7： 模块知识

    Python中,一个.py文件就是一个模块(module):而,包含了多个模块的一个目录,称为包. 每一个包中,都包含一个_init_.py文件,可以是一个空文件,这是Python将普通目录识别为包的 ...

  9. IT经典书籍——Head First系列【推荐】

    Head First 系列书籍是由 O'Relly 出版社发行的一系列教育书籍,中文一般翻译为"深入浅出",它强调以特殊的方式排版,由大量的图片和有趣的内容组合构成,而达到非疲劳的 ...

  10. 团队作业8——第二次项目冲刺（Beta阶段）Day1--5.18

    1.展开站立式会议: 会议内容:①团队里的新成员做简单的自我介绍. ②讨论每天的任务分配问题. ③提出一个严格要求:博客一定要及时发布,并及时提交作业,遇到困难可以提出来一起解决. ④就现阶段的项目进 ...