前言

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. Node.js之操作文件系统（二）

    Node.js之操作文件系统(二) 1.创建与读取目录 1.1 创建目录 在fs模块中,可以使用mkdir方法创建目录,该方法的使用方法如下: fs.mkdir(path,[mode],callbca ...

  2. 匿名委托与Lambda表达式

    通过使用匿名委托(匿名方法),使编程变得更加灵活,有关委托与匿名委托请参考我的前一篇Blog<委托与匿名委托>. 继续之前示例,代码如下: static void Main(string[ ...

  3. 转每天一个linux命令（14）：head 命令

    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾. 1．命令格式: hea ...

  4. python基础教程（二）

    继续第一篇的内容,讲解,python的一些基本的东西. 注释 为了让别人能够更容易理解程序,使用注释是非常有效的,即使是自己回头再看旧代码也是一样. >>> #获得用户名: > ...

  5. 进程管理之system

    system定义 #include<stdlib.h> int system(const char *command); 首先要知道,system函数是c库中的函数,而不是系统调用.其实s ...

  6. macaca 环境搭建篇，（web 和安卓）

    appium研究一段时间,感觉appium太不稳定了, 后来听说了阿里开源了macaca,那么我就想尝尝鲜,啥都不说,我感觉还是赶紧上手搭建环境吧. macaca介绍: Macaca是一套完整的自动化 ...

  7. 大数据平台搭建-hadoop/hbase集群的搭建

    版本要求 java 版本:1.8.*(1.8.0_60) 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downl ...

  8. 增强遍历和Object多参数遍历

    public class T2 { public void t1(Object o){//Object是任何类型,多态 System.out.println(o.toString()); } publ ...

  9. Spring之声明式事务

    在讲声明式事务之前,先回顾一下基本的编程式事务 编程式事务: //1.获取Connection对象 Connection conn = JDBCUtils.getConnection(); try { ...

  10. SVG坐标系统及图形变换

    前面的话 前面介绍过SVG视野后,本文将开始介绍SVG坐标系统及图形变换 坐标定位 对于所有元素,SVG使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都差不多).这种坐标系统是 ...