前言

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. 细说 Azure Storage 的冗余策略

    当我们想要把应用搬到云端的时候,首先要关注的便是数据的安全性.当然所有的云服务厂商都会对用户数据承诺一个非常高的安全性,但万一出现意外呢?我们是不是还要有适当的应对方案?比如今年的3月8日晚间,Azu ...

  2. SpringMVC详解（六）------与json交互

    Json(JavaScript Object Notation),它是一种轻量级数据交换格式,格式简单,易于读写,目前使用特别广泛.那么这篇博客我们主要谈谈在 SpringMVC 中,如何对 json ...

  3. python+selenium自动化软件测试（第4章）：场景判断与封装

    4.1 显示等待WebDriverWait 前言:在脚本中加入太多的sleep后会影响脚本的执行速度,虽然implicitly_wait()这种隐式等待在一定程度上节省了很多时间.但是一旦页面上某些j ...

  4. redi安装

    借鉴文章:https://segmentfault.com/a/1190000010709337 在linux中使用wget时,若报-bash: wget: command not found,则表明 ...

  5. JavaScript函数使用和DOM节点

    一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...

  6. Haproxy基于ACL做访问控制

    author:JevonWei 版权声明:原创作品 haproxy配置文档 https://cbonte.github.io/haproxy-dconv/ 基于ACL做访问控制(四层代理) 网络拓扑 ...

  7. 如何在centos7上安装源码包

    在我们使用linux的过程中,有很多程序是通过红帽官网给的系统中安装的,但是一般来说,系统更新的速度比较慢,如果这个时候我们又想用最新版的该怎么办呢?总不能一直等系统升级吧╮(╯﹏╰)╭所以,我们可以 ...

  8. BGP基础【第三部】

    静态路由的优点:安全稳定.缺点:配置繁琐不灵活.动态路由的优缺点则反之. BGP边界网关路由协议 路径向量(rip是距离矢量) 到达目的网段所要经过的所有as BGP选路不看度量值而参考13种路径属性 ...

  9. CentOS7中安装MySQL5.7 (转)

    安装必要的组件 yum install –y autoconf automake imake libxml2-devel expat-devel cmake gcc gcc-c++ libaio li ...

  10. Java课程设计——博客作业教学数据分析系统（201521123091 李嘉廉）

    #课程设计--博客作业教学数据分析系统(201521123084 李嘉廉) 1.团队课程设计博客链接 博客作业教学数据分析系统 2.个人负责模块或任务说明 數據分析 Kmeans聚類算法實現 多元綫性 ...