前言

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. APUE 2 - 进程组（process group） 会话（session） job

    进程组(process group) 进程组顾名思义是指一个或多个进程的集合.他们通常与同一个job(可以从同一个终端接收信号)相关联.每个进程组拥有一个唯一的Process Group Id.可以使 ...

  2. PHP迭代与递归实现无限级分类

    无限级分类是开发中常见的情况,因此本文对常见的无限极分类算法进行总结归纳. 1.循环迭代实现 $arr = [ 1=>['id'=>1,'name'=>'父1','father'=& ...

  3. Virtualbox虚拟机Ubuntu共享文件夹设置 自动挂载

    1. 安装增强功能包(Guest Additions) 安装好Ubuntu 14.04 后,运行Ubuntu并登录.然后在VirtualBox的菜单里选择"设备(D)" -> ...

  4. [2016-07-15]结合命令行工具awk和多行文本编辑器快速生成DataSeed代码

    目标:根据业务提供的两份数据,生成DataSeed代码 SampleDataA 上海 华东一线 上饶 华东四线 中山 华南二线 临汾 华北四线 临沂 华东二线 SampleDataB 上海 1D04E ...

  5. Extjs:添加查看全部按钮

    var grid =new Ext.grid.GridPanel({ renderTo:'tsllb', title:'产品成本列表', selModel:csm, height:350, colum ...

  6. 零基础如何一步一步开始搭建高性能直播平台？现以GitChat·架构来进行说明

    前言 现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实时解盘,在线专家讲座,专家在 ...

  7. CSS3学习手记

    --------------------CSS3新增选择器--------------------#E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素#E:nth-last-chi ...

  8. SVG图案

    前面的话 给SVG元素应用填充和描边,除了使用纯色和渐变外,还可以使用图案.本文将详细介绍SVG图案 概述 <pattern>可以实现重复的效果,在canvas中被翻译为模式,而在SVG中 ...

  9. chrome开发工具指南（十三）

    模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...

  10. ios 初体验< UISegmentedControl 分段控件>

     小知识:  数组快速创建 @[@"",@"",@"",@"".......],字典快速创建方法:@{@"&q ...